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Preface 



Vous tenez done entre vos mains un exemplaire du livre Bien developper pour le 
Web 2.0. On pourrait croire que ce qui est important dans le titre, e'est « Web 2.0 ». 
Certes, e'est bien le cas. La participation grandissante des utilisateurs, qui est l'une 
des deux particularites du Web 2.0, est importante. Vitale, meme. Paradoxalement, 
cette notion d'un Web ou chacun pourrait a la fois lire et ecrire, consommer et pro- 
duire, est celle de son inventeur, Tim Berners-Lee, meme si peu d'internautes ont 
realise cela. 

Mais ce qui est surtout important dans le titre de cet ouvrage, e'est « Bien 
developper ». Developper « comme il faut ». Car le Web dit « 1.0 » ne s'est pas seule- 
ment traduit par un Web ou seuls quelques auteurs publiaient pour une foule gran- 
dissante de lecteurs : le Web 1.0 s'est aussi traduit par des errements technologiques 
qui ont fait que la promesse du Web n'a ete tenue que partiellement, dans la mesure 
ou les exclus etaient nombreux. Vous n'utilisez pas tel plug-in ? Ah, dommage ! Vous 
avez recours a tel navigateur trop moderne ? Tant pis pour vous ! Vous souhaitez con- 
suiter le site avec votre telephone mobile ? Vous devrez attendre de trouver un PC 
connecte. Vous avez desactive JavaScript dans votre navigateur pour des raisons de 
securite ? Passez votre chemin ! Vous avez un handicap visuel ou des difficultes pour 
manipuler une souris ? Navre, le service n'est pas concu pour vous. Combien de mil- 
lions de personnes se sont retrouvees confrontees a de tels problemes du Web 1.0 ? 
C'est impossible de le dire... Mais fa n'etait pas tant le Web qui etait en cause que la 
mauvaise facon dont les sites ont ete developpes, souvent par faute de formation, de 
recul sur la technologie, encore toute recente. 

Aussi, alors que le Web 2.0 fait tant parler de lui, qu'il convient d'acquerir les compe- 
tences techniques pour construire un site utilisant ces technologies, autant apprendre 
des le debut la bonne facon de faire. La bonne facon, c'est celle qui consiste a utiliser 
des methodes permettant de conserver la compatibilite avec un eventail aussi large 
que possible de navigateurs, d'utilisateurs, de parametrages, et de connexions. 
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Le Web 2.0 fait deux promesses explicites : plus de participation des utilisateurs, et 
des interfaces plus agreables et ergonomiques. II en est une autre qui est implicite : 
que les developpeurs web apprennent des echecs et difficultes du Web 1.0 pour ne pas 
les repeter. Pour eviter le bricolage que fut le Web a ses debuts, en passant a l'epoque 
de la maturite et de Industrialisation, en permettant un acces a tous. C'est en cela que 
ce livre est important : il ne s'agit pas seulement d'apprendre a « developper pour le 
Web 2.0 » mais aussi d'apprendre a bien developper pour le Web. 

Tristan Nitot 
President de Mozilla Europe 
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Avant d'entrer dans le vif du sujet, faisons le point sur les domaines abordes dans ce 
livre, ce qu'il contient et ce que j'ai choisi d'omettre ainsi que sur sa structure gene- 
rale. Nous verrons notamment comment s'articulent les differents themes et 
l'apprentissage. 



A qui s'adresse ce livre ? 



Toute personne interessee de pres ou de loin par les technologies web trouvera son 
interet dans cet ouvrage. Precisons neanmoins qu'une connaissance prealable des 
technologies de contenu web statique est preferable : en l'occurrence, HTML (ou 
mieux, XHTML) et CSS. 

Dans l'ideal, ces connaissances sont « actualisees », et done conformes aux standards 
(XHTML Strict, CSS 2.1) et bien maitrisees, notamment en termes de balisage 
semantique. Les lecteurs ayant des lacunes sur ces technologies pourront toutefois 
trouver, dans les annexes A et B, une presentation succincte des principes fondamen- 
taux, ainsi que de nombreuses ressources - papier ou en ligne - pour parfaire leurs 
connaissances. 

II n'est par ailleurs pas necessaire d'avoir des competences prealables en JavaScript ou 
DOM, ces sujets etant presentes en detail dans cet ouvrage. En somme, ce livre trou- 
vera son public tant aupres des professionnels chevronnes desireux de se mettre a 
jour, que des etudiants souhaitant aller au-dela de leurs cours de technologies web, 
souvent sommaires et trop empiriques, voire obsoletes. 
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Qu'allez-vous trouver dans ce livre ? 

Le livre est decoupe en trois parties, precedees de cet avant-propos et d'un chapitre 
introductif qui presente le Web 2.0 et ses technologies. 

Par ailleurs, l'ouvrage est developpe sur deux axes forts : un axe thematique et un axe 
methodologique et qualitatif. Le premier axe guide le plan, tandis que le second est 
transversal : 

• La premiere partie presente en detail les technologies qui font « vivre » la page web 
elle-meme, qui sont souvent trop peu ou trop mal connues : JavaScript, DOM et, 
pour gagner en agilite et en puissance, l'excellente bibliotheque Prototype. 

• La deuxieme partie explore ce qui fait reellement Ajax, a savoir l'objet 
XMLHttpRequest, moteur de requetes asynchrones, et les frameworks deja etablis 
dans l'univers du Web 2.0, notamment Prototype et script. aculo.us. 

• La troisieme partie pousse plus loin la reflexion et l'utilisation en ouvrant vos 
pages sur des contenus et services externes, au travers des services web, des API 
REST et des flux de syndication aux formats RSS et Atom. 

L'ouvrage est complete par quatre annexes : 

• Les annexes A et B fournissent les bases des deux principales technologies de 
contenu : XHTML et CSS, dans leurs versions recentes. 

• Lannexe C constitue un plus indeniable : en vous expliquant clairement com- 
ment exploiter au mieux les documents de reference qui font le Web (RFC, 
DTD, recommandations W3C...), elle vous donne acces a une connaissance 
actualisee et faisant autorite. 

• Lannexe D, enfin, quoique placee en fin d'ouvrage, est plutot a lire d'entree de 
jeu : elle donne les cles d'un developpement plus productif dans votre navigateur, 
et vous evite de peiner avec les questions de cache en manipulant les exemples de 
ce livre. 

Dans tous ces chapitres, j'ai ete guide par un souci constant de qualite, tant pour la 
technique elle-meme que pour la methodologie de travail. Qu'il s'agisse de unobstru- 
sive JavaScript (concept que nous etudierons en detail au chapitre 2), de balisage 
semantique, de CSS efficaces, d'accessibilite, ou du bon choix de format pour un flux 
de syndication ou le resultat d'une requete Ajax, j'ai fait de mon mieux pour vous 
permettre de realiser un travail haut de gamme, differencie, et pour tout dire, consti- 
tuant un fameux avantage competitif, a l'heure ou tout un chacun n'hesite pas a 
clamer sur son CV qu'il est un « developpeur web expert ». 
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Adressage « je » ou « nous » ? 

Je me suis pose la question du pronom employe lorsque I'auteur est sujet des phrases. D'aucuns dirons 
que « nous » est plus pudique, plus modeste, plus convenable. C'est possible, mais ce livre, je I'ecris pour 
vous, et il m'est tres agreable de vous imaginer en train de le lire. D'ailleurs, j'aime a croire qu'il vous 
plaira et, surtout, vous sera utile. Et puis s'il ne vous plait pas, c'est ma faute, pas la ndtre. Mors, par sim- 
plicity par convivialite, « je ». 



Les standards du Web 

Tout le monde park en bien des standards du Web, et affirme qu'il vaut mieux les 
respecter. Mais personne ne dit vraiment de quoi il s'agit, pourquoi c'est preferable, 
et vers ou se tourner pour mettre le pied a l'etrier. 

A l'heure ou une portion significative des developpeurs web francais chevronnes, et 
la majorite des jeunes diplomes francais croyant « connaitre le developpement web », 
ignorent ce quest le W3C, ne savent pas donner la derniere version de HTML, sont 
dans le fiou sur les differences exactes entre XHTML et HTML, et pensent que 
CSS se resume a coller des balises div et des attributs class et style partout, je 
mesure le chemin a parcourir en termes d'evangelisation et d'education en general. 

De quelles technologies parle-t-on ? 

Commencons par passer en revue les technologies qui font aujourd'hui figure de 
standards du Web. Je restreindrai la liste aux technologies qui se rapprochent de mes 
propos, sous peine d'y consacrer de nombreuses pages. 

• HTML {HyperText Markup Language) est le langage etabli de description de 
contenus dans une page web. Derive du SGML, sa syntaxe est un peu trop per- 
missive pour eviter toute ambiguite et permettre un traitement automatise vrai- 
ment efficace. 

• XML {extensible Markup Language) est une syntaxe plus formelle de balisage de 
contenus, qui garantit le traitement automatique du document sans risquer ni 
ambiguites, ni soucis de jeux de caracteres, ni limitations de types ou tallies de 
contenu. 

• XHTML revient essentiellement a appliquer a HTML les contraintes syntaxi- 
ques de XML, ouvrant ainsi la porte au traitement fiable du contenu des pages 
web. 

• CSS {Cascading Style Sheets, generalement « feuilles de styles » en francais) est 
une technologie de presentation permettant une mise en forme extremement 
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avancee des contenus compatibles XML (mais aussi au HTML, par souci de 
flexibilite). Les possibilites sont enormes, bien au-dela de ce que permettaient les 
quelques balises « presentation » de HTML. 

• DOM {Document Object Model) decrit une serie d'outils a destination des program- 
meurs (on parle $ interfaces) permettant de representer et de manipuler en memoire 
un document compatible XML. Ces manipulations sont pratiquement sans limites, 
et constituent un des piliers d'une page web « vivante ». Parmi les sous-parties de 
DOM, on citera notamment Core, qui fournit le noyau commun a tous les types de 
documents ; HTML, specialise dans les pages web ; et enfin Events, qui gouverne le 
traitement des evenements associes aux elements du document. 

• JavaScript est un langage de script, dynamique, oriente objet et disposant de 
nombreuses fonctions avancees, aujourd'hui disponible sous une forme ou sous 
une autre dans tous les navigateurs un tant soit peu repandus. Sans lui, pas de 
pages vivantes, pas de Web 2.0, pas d'Ajax ! 

• XMLHttpRequest est un objet capable d'envoyer des requetes asynchrones via 
HTTP (voila une phrase qui ne vous dit peut-etre pas grand-chose ; pas d'inquie- 
tude, le chapitre 5 vous eclairera bientot). Utilise en JavaScript, il constitue le 
cceur d'Ajax. 

• RSS 1.0 (RDF Site Summary) est un format de flux de syndication, defini de 
facon beaucoup plus formelle que ses homonymes de versions 0.9x ou 2.0 (ou 
l'abreviation signifie Really Simple Syndication), lesquels sont plus repandus mais 
moins puissants. II est base sur RDF (Resource Description Framework), gram- 
maire formelle de representation de la connaissance autour de laquelle gravite 
l'univers du Web semantique (pour plus de details sur le sujet, consultez par 
exemple http://www.w3 . org/2 00 1 /sw/) . 

• Atom est le format de flux de syndication le plus recent, sans doute le plus puis- 
sant et le plus efficace aussi, sans pour autant verser dans la complexite. 

Parmi les standards du Web, on trouve encore de nombreuses technologies tres 
employees, comme PNG (format d'image), SOAP et les services Web, XSL et 
XSLT; ainsi que d'autres encore trop rarement employees, par exemple SVG 
(images vectorielles), MathML (formules mathematiques), SMIL (multimedia), 
XForms (pour des formulaires web tres performants)... 

Qui est a la barre, et ou va-t-on ? 

Ces standards ne s'inventent pas tout seul ; a leur origine, on trouve le plus souvent 
une organisation, un comite ou une association, parfois une entreprise, plus rarement 
encore un individu. Mais ceux qui ont fait naitre une technologie n'en assurent pas 
toujours bien revolution, comme c'est le cas pour HTML. 
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Comprendre qui s'occupe d'un standard permet de savoir ou suivre son evolution, 
determiner a quoi s'attendre dans les annees a venir, et mieux comprendre ses orien- 
tations et les choix qui le gouvernent. 

• (X)HTML a ete principalement maintenu par le W3C (World Wide Web Consor- 
tium), groupement international d'associations, d'entreprises et d'individus en 
charge de la plupart des technologies du Web, essentiellement dans le contexte 
des navigateurs. Helas, apres avoir publie HTML 4.01 en 1999, le W3C a 
delaisse HTML pour se concentrer sur le Web semantique, CSS et les technolo- 
gies gravitant autour de XML. 

Le probleme, c'est que HTML est l'outil fondamental de tout developpeur web, 
quelle que soit la technologie cote serveur utilisee, Ajax ou non, Web 2.0 ou non. 
Sans evolution depuis le debut du siecle, il echoue a satisfaire nombre de besoins 
recurrents. 

Devant la difficulte a remobiliser le W3C autour de HTML, un groupement 
separe a vu le jour, le WHAT WG ( Web Hypertext Application Technology Working 
Group, http://whatwg.org). Constitue principalement de figures de proue des stan- 
dards, presque tous par ailleurs membres du W3C, il jouit deja d'une excellente 
notoriete et d'une large approbation. II vise a mettre au point plusieurs standards, 
dont deux souvent designes par derision sous i'appellation commune 
« HTML 5 » : Web Applications 1.0 et Web Forms 2.0. Ces deux projets aug- 
mentent enormement les possibilites pour le developpeur web, et plusieurs navi- 
gateurs de premier plan ont annonce leur intention de les prendre en charge... 

• CSS est egalement l'ceuvre du W3C, dont il reste un cheval de bataille important. 
Depuis la version 2, remontant a 1998 (!), le standard evolue de facon double. 
D'un cote, une version 2.1 est en chantier permanent (a l'heure ou j'ecris ceci, la 
derniere revision date d'avril 2006) et constitue une sorte de correction de la 
version 2, qui en precise les points ambigus, ajoute quelques complements 
d'informations, etc. 

De l'autre, la version 3 est un chantier proprement pharaonique, a tel point que le 
standard est decoupe en pas moins de 37 modules. Parmi ceux-la, certains font 
l'objet de beaucoup d'attentions, et sont au stade de la recommandation candidate 
(derniere etape avant l'adoubement au rang de standard), ou de dernier appel a 
commentaires. II ne s'agit au total que de 11 modules sur 37. Pour les autres, soit 
le travail ha carrement pas demarre, soit ils disposent d'une ebauche qui, parfois, 
stagne pendant des annees (le module de gestion des colonnes, pourtant reclame a 
corps et a cris par beaucoup, a ainsi gele entre Janvier 2001 et decembre 2005 !). 
Enfin, meme si CSS a d'ores et deja revolutionne la creation de pages web, on 
verra qu'il existe un gouffre entre les dernieres versions et l'etat de l'art dans les 
navigateurs... 
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• DOM est aussi a la charge du W3C. En DOM, on ne parle pas de versions mais 
de niveaux. Le W3C travaille regulierement dessus au travers de ses sous-projets : 
Core, HTML, Events, Style, Views, et Traversal and Range. 

• JavaScript a ete invente en 1995 par Brendan Eich pour le navigateur Netscape 
Navigator 2.0. C'est aujourd'hui l'ECMA, organisme international de specifica- 
tions, qui gere son evolution au travers des diverses editions du standard ECMA- 
262. Brendan Eich continue a piloter la technologie et travaille aujourd'hui pour 
Mozilla. 

• XMLHttpRequest a ete invente par Microsoft pour Internet Explorer 
(MSIE) 5.0. Depuis 2002, des equivalents ont fait leur apparition dans la plupart 
des navigateurs, au point qu'un standard W3C est en cours de redaction pour 
enfin ouvrir totalement la technologie. 

• RSS est un sigle qui masque en realite deux technologies bien distinctes. La pre- 
miere version historique, la 0.90, vient de Netscape (1999). Les versions 0.9x sui- 
vantes et 2.0 sont l'oeuvre du seul Dave Winer, et fournissent une solution simple 
(et meme simpliste) aux besoins les plus courants de la syndication de contenu. II 
s'agit de standards geles, qui n'evolueront plus. La version 1.0 est beaucoup plus 
puissante, mais aussi plus complexe, car basee sur RDF, done sur un standard for- 
mel lourd realise par le W3C. Elle est encore, pour l'instant, moins utilisee que 
ses homonymes. 

• Atom a ete defini, contrairement a RSS, dans la stricte tradition des standards 
Internet : au moyen d'un forum de discussion ouvert, et encadre des le debut par 
1'IETE organisme international charge de la plupart des protocoles Internet 
(comme HTTP). II gagne sans cesse en popularite, et constitue tres officielle- 
ment un standard (ce qu'on appelle une RFC) depuis decembre 2005, sous le 
numero 4287 (http://tools.ietf.org/html/rfc4287). 

Les principaux acteurs des standards du Web sont done le W3C et, sans doute de 
facon moins visible pour l'utilisateur final, 1'IETF. On constate neanmoins que le 
premier est parfois prisonnier de sa propre bureaucratie, au point que des groupes 
externes reprennent parfois le flambeau, comme c'est le cas autour de HTML avec le 
WHATWG. 

Ce panorama ne serait pas complet sans evoquer le WaSP ( Web Standards Project, 
http://webstandards.org), veritable coalition d'individus ayant apprehende tout 
l'interet des standards du Web et la portee de leur application. Ce groupe fut un 
acteur important de 1' arret de la « guerre des navigateurs » qui a fait rage dans les 
annees 1990, laissant Navigator sur le carreau et faisant entrer MSIE dans la 
lethargie qu'on lui connait. 

Mais surtout, il oeuvre sans relache pour rallier toujours plus d'acteurs, notamment 
les editeurs commerciaux, a la prise en charge des standards. En collaborant avec 
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Microsoft, mais aussi Adobe et Macromedia (du temps ou ils n'avaient pas fusionne), 
ainsi que de nombreux autres, le WaSP aide a rendre les produits phares du marche 
plus compatibles avec les standards et l'accessibilite. Vraiment, grace leur soit 
rendue ! Sans eux, on en serait encore a devoir annoter la moindre mention tech- 
nique dans un ouvrage comme celui-ci a coups de « IE seulement », « NN 
seulement », « non supporte », etc. 

Quels sont done ces avantages extraordinaires qui ont convaincu tant de volontaires 
de fonder ou rejoindre le WaSP, et de partir en croisade aupres des editeurs ? C'est ce 
que je vais vous expliquer dans la section suivante. 

A quoi servent les standards ? 

Encore aujourd'hui, on rencontre de nombreuses personnes qui, lorsqu'on evoque les 
standards du Web, retorquent quelque chose comme : « et alors ? Je n'utilise pas tout 
9a et mon site marche ! Pourquoi devrais-je faire autrement ? ». 

II s'agit la d'une vue tres etroite du site en question. Sans vouloir vexer personne, cela 
revient a ne pas voir plus loin que le bout de son nez, a ne se preoccuper que de soi et 
de son environnement immediat, ce qui est tout de meme inattendu pour un contenu 
cense etre accessible par le monde entier, souvent pour longtemps. 

L' expression desormais consacree HTML des annees 1990 est utilisee pour designer 
ce melange d'habitudes techniques aujourd'hui depassees : balisage heteroclite 
melangeant allegrement forme et fond, utilisant a mauvais escient certaines balises 
(ce qu'on appelle de la « soupe de balises ») ; emploi inapproprie ou incoherent de 
CSS ; surabondance d'elements ch'v ou d'attributs class superflus (syndromes bap- 
tises divitis et classitis) ; declinaisons manuelles ou a peine automatisees des pages 
suivant les navigateurs vises ; et bien d'autres usages que je ne saurai tous citer ici. 

Cette facon de faire, fruit d'une approche fondamentalement empirique du develop- 
pement web et d'une evolution souvent organique des sites, sans plan coherent prea- 
lable, etait peut-etre inevitable pour la premiere generation du Web. Apres tout, la 
premiere version d'un projet contient souvent de nombreuses horreurs qu'il faudra 
eliminer. Mais il ne s'agit pas ici que d'esthetique. Les consequences penibles de cette 
approche sont nombreuses, et accablent aujourd'hui encore un grand nombre de pro- 
jets et societes qui persistent a ne pas evoluer : 
• Faute d'une utilisation intelligente de CSS et de JavaScript, les pages sont beaucoup 
trop lourdes, constituees pour 10 % ou moins de contenu veritable. Impact : le cout 
elevee de la bande passante pour votre site. Pour un site tres visite (a partir du mil- 
lion de visiteurs uniques par mois), le superflu atteint un tel volume que son cout se 
chiffre frequemment en dizaines voire centaines de milliers d' euros par mois. 
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• Un balisage lourd ou rigide, ainsi qu'un emploi inadapte de CSS, amenent aussi a 
des pages ne pouvant pas fonctionner telles quelles sur differents navigateurs, sans 
parler des modes de consultation alternatifs, toujours plus repandus : assistant 
personnel (PDA), telephone mobile 3G, borne Internet sans souris dans un 
espace public, Tablet PC, impression papier pour lecture ulterieure, et j'en passe. 
Pour toucher une plus vaste audience, il faut done mettre en place des versions 
specialises de chaque page, travail particulierement fastidieux aux consequences 
nefastes : d'une part cela multiplie l'espace disque necessaire, d'autre part ce tra- 
vail est generalement realise sommairement, de sorte que certaines versions des 
pages sont de pietre qualite, ou ne sont pas mises a jour assez souvent. 

• Une mauvaise utilisation des CSS entraine generalement une intrusion de l'aspect 
dans le contenu, et rend l'apparence des pages difficile a changer globalement. 
Toute refonte de la charte graphique d'un site devient vite un cauchemar, a force 
de devoir denicher tous les styles en ligne et les balises de mise en forme restees 
cachees au fond d'une page. 

• A moins d'avoir ete profondement sensibilise a la question, une equipe de con- 
ception et developpement de sites web aura tendance a enfreindre a tour de bras 
les regies d'or de l'accessibilite. Non seulement les pages seront difficilement 
exploitables par les non-voyants, les malvoyants, les personnes souffrant d'un 
handicap, meme leger, rendant impossible 1'utilisation de la souris, mais aussi par 
les programmes de traitement automatique, comme Google. En effet, les sites 
peu accessibles sont souvent beaucoup moins bien classes dans les moteurs de 
recherche que ceux qui respectent les principes fondamentaux d'accessibilite. 
N'oublions pas que le Web est cense, par definition, etre accessible par tous. Dans 
World Wide Web, il y a World. 

A l'inverse, modifier ses methodologies de travail pour acceder a un niveau superieur 
de qualite, a une facon plus actuelle, et finalement plus facile de realiser des sites web, 
produit rapidement des benefices : 

• Un site separant clairement le contenu (balisage XHTML) de la forme (feuilles 
CSS) et du comportement (scripts JS, e'est-a-dire JavaScript) produira necessaire- 
ment des pages infiniment plus legeres, sans parler de l'efficacite accrue des strate- 
gies de cache des navigateurs devant un decoupage des donnees en fichiers distincts. 
Apres avoir refondu completement son site, ESPN, principale chaine de sports aux 
Etats-Unis, a augmente son audience tout en divisant a tel point ses couts de bande 
passante que l'economie mensuelle, malgre un tarif extremement avantageux, se 
chiffrait en dizaines de milliers de dollars ! (Pour davantage de details voir l'adresse 
suivante : http://www.mikeindustries.com/blog/archive/2003/06/espn-interview). 

• Une utilisation appropriee des CSS implique d'avoir une seule page XHTML. 
J'insiste : une seule. Si vous croyez encore qu'il s'agit d'un mythe, allez done faire un 
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tour sur le CSS Zen Garden (http://www.csszengarden.com). Lorsque vous aurez 
essaye une petite vingtaine de themes, realisez que la seule chose qui change, c'est 
la feuille de styles. La page HTML est strictement la meme. II ne s'agit pas ici 
seulement d'offrir des themes, mais bien d'offrir une vue adaptee de la page pour 
de nombreux usages et peripheriques de consultation : page agreable a l'impres- 
sion, mais aussi sur un petit ecran (on pense aux PDA et aux telephones mobiles), 
ou avec des modes speciaux pour les malvoyants (comme un contraste fort, un fond 
noir, etc.). Puisqu'il n'y a qu'une seule page, elle est fatalement a jour, et les versions 
alternatives sont done sur un pied d'egalite. Tout en gagnant de l'audience, vous la 
traitez mieux en lui garantissant le meme contenu pour tous. 
Une prise en compte systematique de l'accessibilite, qui elle non plus hentrave en 
rien la page, facilite la vie aux utilisateurs accables d'un handicap quelconque (plus 
de 20 % des internautes aux Etats-Unis et en France, selon certaines etudes). 
Couplee a l'emploi d'un balisage semantique, elle signifie aussi que l'indexation 
de la page par les moteurs de recherche sera de bien meilleure qualite, augmentant 
votre visibilite et done vos revenus potentiels. 



Mercantilisme... aveugle ? 

Le patron qui eructait, lors d'une conference, « on vend des ecrans plasma, on s'en fout des aveugles, ce 
ne sont pas nos clients ! » s'est vu gratifier d'une reponse a I'evidence cinglante : le malvoyant voire 
non-voyant n'en est pas moins internaute, et s'il ne peut offrir a un proche un bel ecran achete sur votre 
site, il I'achetera ailleurs. La reflexion vaut, evidemment, pour tous les handicaps... 



Qu'cn pensent les concepteurs de navigateurs ? 

Disons qu'ils sont partages. Et pour etre precis, c'est un peu une situation « un contre 
tous ». D'un cote, on trouve les navigateurs libres accompagnes de quelques naviga- 
teurs commerciaux traditionnellement respectueux des standards : Mozilla, Firefox 
et Camino, Konqueror, Opera et Safari, pour ne citer qu'eux. De l'autre, on trouve 
un navigateur commercial qui, des qu'il n'a plus eu de concurrence significative a 
partir de 1999, a sombre dans la lethargie, j'ai nomme MSIE. 

La situation n'est toutefois pas si claire : tous les navigateurs n'ont pas le meme niveau 
de prise en charge pour tous les standards, et le travail sur MSIE a repris en vue d'une 
version 7. Dressons ici un rapide portrait des principaux navigateurs au regard des 
standards. Gardez a l'esprit que cette situation evolue rapidement, et que vous aurez 
interet a suivre l'actualite des principaux navigateurs pour vous tenir a jour. 

Notez que tous les navigateurs ci-dessous supportent XMLHttpRequest. MSIE utilise 
encore un ActiveX qui deviendra un objet natif JavaScript standard dans IE7, tandis 
que les autres navigateurs utilisent deja un objet natif JavaScript. 
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Mozilla/Firefox/Camino 

lis utilisent peu ou prou le meme moteur, meme si la suite Mozilla a ete abandonnee par la fondation, et que 
sa mise a jour est desormais assuree par une communaute de volontaires, qui peuvent parfois mettre du 
temps a integrer les nouveaut.es de Firefox dans la suite complete (projet Seamonkey). Quant a Camino, c'est 
un Firefox specialise Mac OS X, globalement equivalent cote standards. On parle ici de Firefox 1 .5. 

(X)HTML 

CSS 



Tres bon support, a hauteur des versions recentes. 



JavaScript 



Bon support de CSS 2.1, hormis quelques aspects encore exotiques, et support emergeant 
de certains modules 3.0. 



Naturellement le meilleur, puisque le chef d'orchestre de la technologie travaille pour la 
fondation Mozilla. Toujours a jour sur la derniere version. Firefox 1 .5 supporte JS 1 .6 et la 
version 2.0 supportera JS 1 .7. 



Tres bon support du niveau 2, support partiel du 3. 




Tres bon support, a hauteur des versions recentes 



Tres bon support de CSS 2.1, hormis quelques aspects encore exotiques (notamment les 
styles audio). 

Bon support de JS 1.5. 

Bon support du niveau 2. 



Safari 2 
(X)HTML 
CSS 

JavaScript 
DOM 

Opera 9 

A noter qu'Opera propose une excellente page pour suivre sa compatibilite aux standards : 
http://www.opera.com/docs/specs/ 

(X)HTML 

CSS 

JavaScript 

DOM 



Tres bon support, a hauteur des versions recentes. 
Excellent support de CSS 2.1 (passe le test Acid2). 
Prend en charge ECMA-262 3 rd , soit JS 1 .5. 
Tres bon support du niveau 2, bon support du 3. 



Konqueror 3.5.2 

(X)HTML Tres bon support, a hauteur des versions recentes. 

CSS Excellent support de CSS 2.1, (passe le test Acid2), support partiel de CSS 3. 

JavaScript Bon support de JS 1 .5. 

DOM 



Tres bon support du niveau 2, support partiel du 3. 
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Internet Explorer 6 



(X)HTML 

CSS 

JavaScript 

DOM 



Tres bon support, a hauteur des versions recentes. Un souci avec les prologues XML, sans 
grande importance. 



Support de CSS 1, tres partiel de CSS 2. 



Jscript 6.0, pas totalement compatible JavaScript, fonctionnellement entre JS 1 .3 et 1 .5. 



Support correct du niveau 2, mais persiste a se comporter parfois differemment du standard 



Internet Explorer 7 (projections sur annonces) 



(X)HTML 

CSS 

JavaScript et 
DOM 



Plus de souci de prologues. 






Support a priori total de CSS 1 et correct de CSS 2.1 . 

Pratiquement aucune amelioration prevue, ni en version, ni en vitesse. Entre le DOM des 
objets select, le getET ementByld qui utilise aussi I'attribut name, les prototypes 
non modifiables des objets natifs, le modele evenementiel proprietaire (notamment pas de 
addEventLi stener) ou I'absence tres penible de DOM niveau 3 XPath, il y a de quoi 
faire pour IE8.... 



Comme on peut le constater, MSIE reste loin derriere les autres. II ne faut pas 
s'etonner si Konqueror gagne du terrain chez les utilisateurs de Linux, et si Firefox a 
grignote, en a peine 2 ans, plus de 20 % de parts de marche, et jusqu'a 37 % dans cer- 
tains pays. Rien qu'en France, pourtant au 17 e rang en Europe, les 18 % representent 
quelque 4,8 millions d'internautes. Qyiconque continue a developper un site Internet 
au mepris des standards ferait mieux de ne pas avoir trop d'ambitions commerciales... 



Quelques mots sur les dernieres versions 

Void un rapide tour d'horizon des versions en cours et a venir pour les principaux 
standards. La aussi, un peu de veille sera votre meilleur atout. 

• HTML est en version 4.01 (decembre 1999). Son evolution passera sans doute 
par le « HTML 5 » du WHAT WG, mais la prise en charge par les navigateurs 
est balbutiante (Web Forms 2.0 en beta dans Opera 9 et sous forme d'extension 
pour Firefox, par exemple). 

• XHTML est en version 1.1. La plupart des navigateurs implementent au moins 
la version 1.0. La version 1.1 est plus stricte et demande normalement un type 
MIME distinct, qui panique notamment MSIE pour le moment ! En revanche, 
certains aspects de la prochaine version, la 2.0, sont denigres par le plus grand 
nombre, au motif principal qu'elles cassent vraiment trop la compatibilite descen- 
dante sans grand avantage en retour. 

• CSS est en version 2.1, avec beaucoup de travail autour des 37 modules compo- 
sant CSS 3.0. Le calendrier de sortie de ces modules a titre de recommandations 
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s'etalera probablement sur au moins 5 ans... La ou Konqueror, Safari et Opera 
sont plutot au en tete, Firefox a pour l'instant un tout petit peu de retard, et 
MSIE est tres, tres loin derriere. Toutefois, son imminente version 7 a fait 
d'immenses progres la-dessus. 

• DOM est au niveau 2, et avance bien au niveau 3, plusieurs modules etant termi- 
nes, dont le Core. La plupart des navigateurs s'attaquent fortement a ce nouveau 
niveau, et meme MSIE devrait rattraper un peu son retard prochainement. 

• JavaScript est en version 1.7, actuellement uniquement pris en charge par 
Firefox 2.0, mais la disponibilite de bibliotheques Java et C++ toutes pretes (comme 
Rhino) facilitent l'integration par d'autres navigateurs. La version 1.7 apporte quel- 
ques grandes nouveautes, mais ce n'est rien a cote de la version 2.0, qui devrait sortir 
au 2 e trimestre 2007, apres une version 1.9 au premier trimestre. 



Qu'est-ce que le « Web 2.0 » ? 



Le terme « Web 2.0 », qui a envahi la presse et les sites specialises, decrit en realite 
deux phenomenes distincts. 

D'une part, il y a cette evolution profonde des interfaces utilisateur proposees en 
ligne, qui rattrapent en convivialite et en interactivite celles qu'on trouve sur des 
applications plus classiques (applications dites « desktop », au sens ou elles s'execu- 
tent en local sur la machine de l'utilisateur), ou meme sur celles qui equipent des 
peripheriques legers (telephones mobiles, assistants personnels, etc.). 

Glisser-deplacer, completion automatique, creation dynamique d'images, personna- 
lisation a la volee de l'interface, executions en parallele : autant de comportements 
que nous avons pris l'habitude de trouver dans les applications, et qui manquaient 
cruellement -jusqu'a recemment- aux navigateurs. Ceux-ci etaient reduits a des 
roles subalternes, a un sous-ensemble ridiculement etrique de possibilites bien eta- 
blies. Et pourtant, les navigateurs ne sont pas plus betes que les autres programmes : 
nous les avons simplement sous-exploites jusqu'ici. 

Lautre facette du Web 2.0, cest ce qu'on pourrait appeler « le Web aux mains des 
internautes ». 

II n'y a pas si longtemps, consulter une page web constituait une experience similaire 
a lire une page imprimee dans un magazine : on havait pas son mot a dire sur 
l'aspect. Cette barre de navigation sur la droite vous gache-t-elle la vue ? Ce bandeau 
de publicite vous enerve-t-il ? Le texte est-il trop petit, ou le contraste trop faible 
pour votre vue ? Tant pis pour vous ! Le concepteur graphique du site l'a voulu ainsi, 
et sa volonte fait loi. En fait, consulter une page web etait encore pire que lire un 



Avant-propos 



magazine : sur ce dernier, au moins, on beneficiait de l'excellente resolution de 
l'impression, de sorte que les textes en petite taille etaient bien plus lisibles. Bien sur, 
la plupart des navigateurs permettent de desactiver CSS ou d'utiliser une feuille de 
styles personnelle, ou encore de zoomer sur le texte voire sur toute la page (images 
comprises), mais c'est une pietre consolation. 

Et voila que de nouveaux usages apparaissent, qui donnent enfin a l'internaute la haute 
main sur l'aspect final de la page sur son navigateur. Exit, les parties superflues et 
irritantes ! Agrandi, le texte principal ecrit bien trop petit ! Et tant qua faire, augmen- 
tons la marge entre les paragraphes et aerons le texte en changeant l'interligne ! A l'aide 
d'outils dedies, tels que les extensions GreaseMonkey (http://greasemonkey.mozdev.org) 
et Platypus (http://platypus.mozdev.org) pour Firefox, le visiteur peut ajuster comme 
bon lui semble l'aspect d'une page, et rendre ces ajustements automatiques en prevision 
de ses visites ulterieures. 

Par ailleurs, les internautes peuvent maintenant contribuer a faire l'actualite du Web, 
tant grace a la facilite de publication qu'offrent des outils comme les blogs, qu'au tra- 
vers d'annuaires de pages tees dynamiques bases sur des votes de popularite (par 
exemple, Digg). Le principe est simple : ces annuaires permettent a tout un chacun 
de « voter » pour une page quelconque du Web. Les annuaires maintiennent alors 
une liste, par popularite decroissante, des pages ainsi signalees. 

Si un nombre massif d'internautes votent pour une meme page, celle-ci apparait 
fatalement en excellente position dans l'annuaire qui a recueilli les votes. Le resultat 
net est seduisant : les annuaires en haut de liste ont un contenu qui a interesse, amuse 
ou marque un maximum de gens. Statistiquement, il a done toutes les chances de 
vous interesser, vous aussi. 

Sous un angle plus politique, cela signifie que les « gros titres » ne sont plus confies a 
une salle de redaction, si facile a instrumentaliser. Pour acquerir une telle visibilite, 
fut-elle ephemere, la page n'a d'autre choix que de plaire a beaucoup de monde. C'est 
un systeme tees democratique. 

Les principaux sites de ce type : del.icio.us (http://del.icio.us/) et Digg 
(http://www.digg.com, plus oriente technologies) pour n'en citer que deux, sont deja 
extremement visites (plusieurs dizaines de millions de visiteurs uniques par jour). Du 
coup, de nombreux blogs, magazines en ligne et autres sites au contenu tees dyna- 
mique affichent systematiquement sur leurs pages des liens graphiques aisement 
reconnaissables pour faciliter (et done encourager) le vote de l'internaute aupres des 
principaux annuaires. 

Les sites Technorati et del.icio.us figurent egalement parmi les pionniers d'un nouvel 
usage qui se repand rapidement : le tagging. II s'agit de permettre aux internautes de 
qualifier une page a coup de mots-cles, pour obtenir un systeme riche de references 
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croisees et de categories tous azimuts, bien plus souple que les hierarchies de categories 
habituelles. Certains outils de blog, comme Typo (http://typosphere.org) ou Dotclear 2 
(http://www.dotclear.net), proposent deja 1' affectation de tags (etiquettes) aux billets. 

Le Web 2.0, tout comme Firefox a sa sortie, vous invite finalement a « reprendre la 
main sur le Web ! » 



Vue d'ensemble, chapitre par chapitre 

Pour finir cet avant-propos (un peu long, je vous l'accorde), je vous propose de jeter 
un coup d'oeil general a la structure de l'ouvrage, en soulignant son articulation et le 
role de chaque chapitre. 

• Le chapitre 1, Pourquoi et comment relever le defi du Web 2.0 ?, pose la problemati- 
que et les enjeux. II s'agit de bien saisir la charniere entre les sites classiques et le 
Web 2.0 ; apres de nombreux exemples illustres et le positionnement des princi- 
pals technologies dans 1' architecture globale d'un developpement, le chapitre 
demystifie Ajax et termine en dressant un plan d'actions, autour de cet ouvrage, 
pour vous aider a tirer le maximum de benefices de votre lecture. 

Premiere partie : donner vie aux pages 

Trois chapitres visent a s'assurer que vous maitrisez bien les piliers desormais classi- 
ques sur lesquels se construit aujourd'hui Ajax. A moins que vous ne soyez veritable- 
ment un expert en JavaScript et DOM, parfaitement respectueux des standards qui 
les gouvernent, je ne saurais trop vous recommander de ne pas faire l'impasse sur ces 
chapitres, au seul pretexte que vous croyez les connaitre. En toute probability, vous 
allez y apprendre quelque chose. 

• Le chapitre 2, Ne prenez pas JavaScript pour ce qu'il nest pas, presente en detail ce 
langage si mal connu, accable d'a priori et souvent bien mal employe. Ce chapitre 
est tres riche en conseils et astuces methodologiques, et prend soin de vous aider a 
realiser une couche « comportement » la plus propre et la plus elegante possible. 
Une place particuliere est accordee au debogage. 

• Le chapitre 3, Manipuler dynamiquement la page avec le DOM, nous ouvre les 
voies royales qui menent aux pages veritablement dynamiques, dont le contenu 
evolue rapidement, entierement cote client. De nombreux exemples pour des 
besoins concrets sont realises. Des conseils precieux et un point sur les problemes 
residuels de compatibilite terminent ce chapitre. 

• Le chapitre 4, Prototype : simple, pratique, elegant, portable !, presente la quasi-tota- 
lite de Prototype, sans doute la plus utile des bibliotheques JavaScript largement 
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repandues. Grace a die, nous allons apprendre a realiser du code JavaScript qui, 
alors qu'il est parfois plus portable que nos precedentes tentatives, est neanmoins 
plus elegant, plus concis, plus expressif, et d'une facon generale tellement plus 
agreable a ecrire. 

Deuxieme partie : Ajax ou Tart de chuchoter 

Une fois etablies de bien solides et confortables bases techniques, vous allez pouvoir 
vous plonger dans ce qui constitue, pour beaucoup, la partie la plus visible d'Ajax : les 
requetes asynchrones en arriere-plan. C'est grace a elles que nos pages semblent 
enfin capables de faire « plusieurs choses en meme temps », et n'ont plus autant 
besoin de se recharger integralement. 

Le chapitre 5, Les mains dans le cambouls avec XMLHttpRequest, vous emmene 
jusqu'aux trefonds de la technologie responsable des requetes asynchrones. C'est 
l'occasion de decouvrir une autre technologie de pointe, tres agreable elle aussi : le 
langage Ruby, dont nous nous servirons pour creer, avec une deconcertante facilite, 
un serveur web a contenus dynamiques pour nos tests. 

Le chapitre 6, Ajax tout en souplesse avec Prototype, nous fait passer a la vitesse 
superieure ! Puisque nous maitrisons desormais les rouages, nous allons pouvoir 
delaisser le cambouis pour faire des bonds spectaculaires en productivite avec les faci- 
lites Ajax de Prototype (encore lui !). 

Le chapitre 7, Une ergonomie de rive avec script. aculo. us, explore l'incroyable biblio- 
theque d'effets visuels et de comportements avances proposee par script.aculo.us. Ce 
chapitre vous emmene par ailleurs plus loin dans la reflexion, autour des usages perti- 
nents ou malvenus d'Ajax et des limites de son utilisation. 

Troisieme partie : parler au reste du monde 

C'est un peu la partie bonus, qui va au-dela de la technologie Ajax pour explorer des 
usages concrets, et de plus en plus frequents. Lidee, c'est que nos pages n'ont aucune 
raison de se limiter a notre serveur et peuvent discuter tout aussi aisement avec 
n'importe quel site, et n'importe quel service prevu a cet effet. 

Le chapitre 8, WebServices et REST: nous ne sommes plus seuls, illustre cette idee en 
presentant ces deux technologies pour s'attacher ensuite a faire profiter nos pages des 
possibilites de recherche d'Amazon, de prevision de The Weather Channel, et des 
bibliotheques d'images de Flickr. 

Le chapitre 9, L'information a la carte :flux RSS etAtom, presente les deux principaux 
formats de flux pour mettre en oeuvre une syndication de contenus (blogs et autres) 
directement sur nos pages. 
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Des annexes pour le debutant comme pour I'expert 

Sur quatre annexes, deux visent a aider le lecteur auquel manqueraient quelques 
bases, tandis que les deux dernieres donnent a tous des competences recherchees. 

L'annexe A, Bien baliser votre contenu : XHTML semantique, rappelle les bases du 
XHTML et insiste lourdement sur l'importance d'un balisage non seulement valide, 
mais surtout semantique. Apres avoir succinctement liste les balises pour memoire, 
elle fournit egalement quelques cas concrets de balisage impeccable, correspondant a 
des besoins recurrents. 

L'annexe B, Aspect irreprochable et flexible : CSS 2.1, joue le meme role vis-a-vis de 
CSS, et done de la mise en forme. Le vocabulaire est precise, avant d'attaquer suffi- 
samment les fondamentaux : structure des regies, principe de cascade et modele de 
boites. Une liste concise des selecteurs et proprietes permet de ne pas trop patauger 
dans les exemples du reste de l'ouvrage. 

L'annexe C, Le plus de I'expert : savoir lire une specification, apporte un reel plus en 
vous apprenant a lire les principaux formats de specification pour les standards du 
Web, et a naviguer au sein de ces documents parfois complexes, qui font souvent 
appel a des syntaxes particulieres. Etre a l'aise avec ces documents presente de nom- 
breux avantages et constitue une competence encore trop rare. 

L'annexe D enfin, Developper avec son navigateur web, fait le point sur les possibilites 
riches ou moins riches pour votre productivite de developpeur web sur les principaux 
navigateurs : gestion du cache, extensions, outils complementaires de debogage et de 
test, y sont passes en revue. A lire imperativement, en fait, avant de demarrer le livre ! 

J'ai fait de mon mieux pour que vous retrouviez dans cet ouvrage autant d'informa- 
tions techniques, concretes et de qualite, que ce que je fournis a mes etudiants dans 
mes cours. 

Aller plus loin... 

On ne le repetera jamais assez, tout l'ouvrage tente de repondre a un souci constant 
de qualite, d'elegance, d'efficacite, au travers de nombreux conseils methodologiques 
et choix techniques savamment orientes. Lobjectif n'est rien moins que vous rendre 
meilleur que la competition ! 

Dans le meme esprit, la plupart des chapitres se terminent par une section « Pour 
aller plus loin... », qui liste des ouvrages et ressources en ligne de qualite permettant 
d'approfondir les sujets explores. 
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A propos des exemples de code 

L'ensemble des codes source de ce livre est disponible dans une archive disponible sur 
le site web des editions Eyrolles (www.editions-eyrolles.com), accessible depuis la page 
de l'ouvrage. Certains chapitres n'utilisent que de courts extraits (par exemple, le 
chapitre 4 sur Prototype), mais l'archive fournit toujours des pages de test completes. 

Ces exemples ont tous ete testes sur Firefox 1.5, Safari 2, MSIE 6, Opera 9 et 
Konqueror 3.5.2. Lorsque certaines contraintes sont incontournables, l'impact est 
precise dans le texte du livre. 

Par ailleurs, les bibliotheques Prototype et script.aculo.us qui y figurent sont parfois 
plus recentes que leur derniere version stable publique. Pour Prototype notamment, 
c'est la version 1.5.0_rcl, avec le patch pour script.aculo.us 1.6.4, que j'ai retenue. 

C'est cette version qui est documentee au chapitre 4. Elle a en outre l'avantage de 
corriger un probleme de positionnement sur Opera et un autre sur MSIE, qui 
auraient cause des soucis pour certains exemples. L'archive des codes source vous 
fournit aussi ces versions a part, dans un repertoire bi bl i otheques_seul es , situe a la 
racine de l'archive. 
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Pourquoi et comment relever 

le defi du Web 2.0 ? 



Le Web 2.0, c'est bien, mais quels en sont les problematiques et les enjeux ? Que 
peut-on attendre a present des sites, quelles technologies doit-on maitriser (et peut- 
etre apprendre a nouveau, apprendre mieux), et comment interoperent-elles, notam- 
ment dans le cadre d'Ajax ? Ce chapitre tente de repondre a toutes ces questions, et 
termine en etablissant un plan d'actions simple, base sur cet ouvrage, pour vous aider 
a devenir un veritable expert des technologies Web 2.0. 



Avant/apres : quelques scenarios frappants 

Afin de bien fixer les idees, explorons ensemble quelques services faisant un emploi 
efficace (et plutot emblematique) des possibilites d'Ajax. 

La saisie assistee : completion automatique de texte 

Une des principales utilisations novatrices dAjax est la saisie assistee, egalement 
appelee « completion automatique de texte ». Le principe est simple, et courant dans 
les applications classiques : au fur et a mesure de la frappe, une serie de valeurs finales 
possibles est proposee a l'utilisateur, qui correspond a ce qu'il ou elle a tape jusqu'ici. 
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C'est un comportement qu'on attend d'un simple telephone mobile (avec le fameux 
mode T9 pour la saisie des messages) tandis qu'il restait dramatiquement absent des 
pages web, lesquelles evoluent pourtant dans un environnement bien plus sophistique. 

Voyons un premier exemple, avec www.ratp.info, le site de la RATP, la regie des trans- 
ports en Ile-de-France. Leur moteur de recherche d'itineraires permet de preciser 
des adresses completes, des stations ou des lieux comme points de depart et d'arrivee. 
En mode station par exemple, au fil de la frappe, une liste de possibilites est affichee 
qui permet de saisir rapidement la station visee. 

Imaginons que Ton souhaite partir de la station « Arts et Metiers » a Paris. A peine 
a-t-on tape ar que la liste (qui s'affiche par-dessus la saisie, ce qui est un choix discu- 
table) presente l'aspect suivant : 



Figure 1-1 

Une saisie assistee sur le site de 
la RATP, apres frappe de « ar » 
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Ajoutons simplement le t, et la liste devient : 



Figure 1-2 

La saisie assistee apres frappe 
de « art » 
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II ne nous reste plus qu'a selectionner directement la station (ce qui peut se faire en 
deux touches clavier ou d'un clic de souris), operation bien entendu plus rapide 
qu'une saisie complete et qui reduit dramatiquement le risque d'erreurs de frappe, 
ameliorant ainsi la pertinence du moteur de recherche d'itineraires. 

Un exemple plus connu, et peut-etre plus impressionnant, est Google Suggest, fonc- 
tion proposee par les laboratoires de Google (http://labs.google.com, qui propose une 
foule de fonctions avancees encore en rodage). 
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Chapitre 1 

Google Suggest est un mode special d'utilisation de la version anglophone du moteur de 
recherche : http://www.google.com/webhp?complete=1&hl=en. Void ce qui se passe (ins- 
tantanement ou presque !) lorsqu'on demarre une recherche sur Ajax en tapant le a initial : 



Figure 1-3 

Saisie assistee avec Google 
Suggest, apres frappe de « a : 
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La liste de propositions, qui est longue, inclut egalement le nombre de resultats, ce 
qui permet de rendre moins ambigue la recherche (par exemple, en cas de doute dans 
l'orthographe de Johannesburg, la capitale de l'Afrique du Sud, a peine a-t-on tape 
johan qu'on voit l'orthographe correcte obtenir pres de 7 millions de resultats, tandis 
qu'en ajoutant immediatement un e, on tombe sur des recherches ne depassant pas 
les dizaines de milliers). 

Void l'affichage de Google Suggest alors que nous continuons notre recherche sur 
Ajax, en ayant tape aja : 



Figure 1-4 

Saisie assistee avec Google 
Suggest, apres frappe de 
« aja » 



Htfiiei bdiLiun AINchage Aller u Muruu«-|jiiytia OuLils Aide 



■ ^ 3 ® |!C hrrp//WAW.f3nnnle.mm/wfihhp?mmplere M _^J [0, 



Gousle 

Suggest ^J beta 



^sonali;eJH ? mg | Siqn-n 



Web 


Irnafles 


JfQLpE 


NgWS 


1 roc ah 


' ■' IE L . 


mem ■ 






j a 














i^m.nm ■■■m-b. 


a,3) ilevgan 














72.DOO Wbl 


j.j ; 














■sij.acc ■«+. w 


o,-i ■ ani&lardani 














:3^jvi ■(+. w 


a a ■ K 














TIQ.DDffimta 


a.anta 














IW.DOO iml 


upuriLu .,i..-. 














tt.NUU II.. ft 


;,,;,, iMit.ni, 














.■.'■:-::: *l, -l 


;i,;i[ *ip= 














Mini: -,l. ft 




Bien developper pour le Web 2.0 



Notez que sur une connexion aujourd'hui classique (ADSL d'au moins 512 kbit/s), 
les requetes en arriere-plan effectuees par le moteur de suggestion n'entravent pas le 
moins du monde le confort de frappe. 

Le chargement a la voice 

Une autre utilisation tres courante d'Ajax reside dans le chargement de donnees a la 
volee. On peut d'ailleurs considerer la saisie assistee comme un cas particulier de 
chargement a la volee. D'une facon generale, l'idee reste l'obtention de contenu suite 
a une action utilisateur sans exiger le rechargement complet de la page. 

II peut s'agir de n'importe quel contenu : liste de propositions (comme nous l'avons 
vu precedemment), informations dynamiques (donnees meteo, valeurs boursieres), 
articles issus de flux RSS ou Atom (blogs, modifications apportees a un referentiel de 
sources, journaux d'information en ligne), graphiques (cartes, prises de vue par satel- 
lite, niveaux de jeu en ligne)... La seule limite reste l'imagination (et, dans une 
mesure chaque jour plus faible, la bande passante) ! 

Deux exemples incontournables donnent un apercu des possibilites. 

Tout d'abord Netvibes, jeune societe francaise specialisee dans les technologies 
Web 2.0, dont la page d'accueil fournit a tout un chacun un portail personnel en 
ligne entierement personnalisable, tant dans le contenu que pour la disposition 
visuelle de ce contenu. 

Void la page d'accueil par defaut : 



Figure 1-5 

La page d'accueil 
par defaut de Netvibes 
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Pourquoi et comment relever le defi du Web 2.0 ? 

Chapitre 1 

Notez la structure de la page : 

• Une serie de paves, qui peuvent etre deplaces librement et a volonte, par simple glis- 
ser-deplacer, afin d'arranger la disposition du contenu comme bon nous semble. 

• Un titre personnalisable (il suffit de cliquer dessus pour le rendre editable imme- 
diatement). 

• Des liens dans le haut permettant d'aj outer du contenu, de minimiser/restaurer 
les differents paves, de regler quelques parametres generaux (tout ceci sans rechar- 
ger la page d'ensemble) et de se connecter a son compte Netvibes. 

• Des onglets pour categoriser le contenu afin d'eviter une page trop lourde visuel- 
lement. 

• Pas de bouton de sauvegarde. 

Quant aux contenus disponibles, ils sont de natures tres diverses : meteo, liste de 
choses a faire, consultation courriel (ici via Gmail), recherche de meilleurs prix, dic- 
tionnaires et encyclopedies, blogs, notes et meme des catalogues de photos (ici via 
Flickr) ! Void d'ailleurs l'interface d'aj out de contenu, qui apparait a gauche de la 
page lorsqu'on active le lien correspondant : 



Figure 1-6 

L'interface d'ajout de contenu 
de Netvibes 
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Chaque pave dispose de proprietes specifiques pour ajuster son comportement et son 
affichage, comme en temoignent les figures suivantes. 
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Figure 1-7 

Modification des proprietes 
d'un pave meteo 
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Figure 1-8 

Modification des proprietes 
d'un pave de taches a faire 



▼ To Do List 

Title : 
Color : 
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Figure 1-9 

Modification des proprietes 
d'un pave de recherche des 
meilleurs prix 
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Chaque pave peut etre deplace a l'aide d'un simple glisser-deplacer. Apres avoir retire 
quelques paves, la figure 1-10 montre ce que Ton obtient tandis que Ton en deplace un. 

Notez la delimitation en pointilles de l'emplacement cible, qui nest peut-etre pas 
tres bien rendue a l'impression de cet ouvrage. Qu'a cela ne tienne : allez sur le site 
- qui ne necessite aucune inscription - et essayez vous-meme ! 
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Chapitre 1 



Figure 1-10 

Deplacement d'un pave par 
glisser-deplacer 
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Ces images permettent difficilement de rendre compte de l'impression que fait l'utili- 
sation d'un service comme Netvibes. Pour dire les choses simplement, on a l'impres- 
sion d'utiliser une application normale. En d'autres termes, la page ne souffre pas des 
limitations que nous associons habituellement au contenu web. Pas de rechargement 
global, tres peu de delais, beaucoup de reactivite, une large place attribute aux mani- 
pulations souris : ce ne sont la que quelques aspects qui, pour evidents qu'ils soient 
dans nos applications favorites, nous surprennent encore dans une page affichee par 
un navigateur. La seule zone d'ombre du site, qui tient dans une certaine tendance a la 
divitis , ne concerne en rien le confort de manipulation propose a l'utilisateur. 

Un autre exemple phare du chargement de contenu a la volee grace a Ajax est le 
moteur de cartographie interactive Google Maps. Ce service en ligne permet d'effec- 
tuer des recherches geographiques (comme « hotels a Paris » ou « 61 bid Saint-Ger- 
main 75005 Paris ») et de les associer a une cartographie detaillee, qui peut meme 
etre melangee a des prises de vue par satellite. II est egalement possible de demander 
des itineraires. 

Void la vue initiale de Google Maps, recentree sur l'Europe (figure 1-11). 



1. http://fr.wikipedia.org/wiki/Divitis 
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Figure 1-11 

Google Maps, vue centree sur 
I'Europe, niveau de zoom faible 
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Par glisser-deplacer, on peut se deplacer dans la carte, aussi loin que Ton souhaite. 
On peut egalement faire glisser le curseur sur la gauche pour augmenter le niveau de 
zoom. Tout ceci suppose bien sur que le contenu affiche est recupere au fur et a 
mesure, sans quoi le volume de donnees a obtenir serait tenement enorme que toute 
tentative serait vouee a l'echec. 

Le type de carte evolue suivant le niveau de zoom. Ainsi, en se concentrant sur Paris, 
on obtient une vue plus « routiere » : 



Figure 1-12 

Google Maps, vue centree sur 
Paris, niveau de zoom moyen 
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Pourquoi et comment relever le defi du Web 2.0 ? 

Chapitre 1 



Et en cherchant une adresse (ou un itineraire), on obtient une vue detaillee, avec en 
prime un ballon (notez l'ombre portee : on fait decidement dans la finesse pour 
l'interface utilisateur !) situant precisement l'emplacement concerne : 



Figure 1-13 

Google Maps, vue cale sur une 
adresse precise, zoom eleve 
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Google Maps permet egalement la reprise, et le melange, des prises de vue par satellite 
qui font la base de Google Earth. Ainsi, pour ceux qui preferent du visuel a des cartes, 
ou pour ceux qui s'interrogent sur l'aspect de leur quartier, on peut passer en vue satel- 
lite ou mixte, et ce jusqu'a un niveau de detail impressionnant (1 pixel pour 50 cm) : 



Figure 1-14 

Google Maps, vue calee sur une 
adresse precise, en mode mixte, 
zoom maximal 
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Bienvenue sur le toit des editions Eyrolles. 

Le plaisir et le confort d'utilisation de ce service reposent sur l'interactivite forte qu'il 
permet : on utilise exclusivement la souris, on glisse, on zoome, on se deplace. La page 
ne se recharge jamais dans son integralite, pas d'attente intermediate, pas de page 
blanche. Sans des technologies comme Ajax, un tel service serait un enfer ergonomique. 

La sauvegarde automatique 

Un aspect important de nombreuses interfaces web reposant sur Ajax est la sauve- 
garde automatique. En d'autres termes, on trouve de moins en moins de boutons 
Valider, Envoyer, Sauvegarder ou Enregistrer. Toute saisie est transmise automatique- 
ment au serveur, en arriere-plan, une fois quelle est considered terminee. 

Si vous vous promenez a travers l'interface de Netvibes, par exemple, vous verrez 
qu'il n'y a pas de bouton dont le role est d'envoyer vos modifications au serveur. Et ce 
pour une raison bien simple : ces envois ont lieu de toute facon, en arriere-plan. C'est 
la base d'Ajax. Vous voulez changer le titre de la page ? Cliquez dessus, tapez le nou- 
veau titre, validez avec la touche Entree ou cliquez simplement ailleurs pour annuler 
la selection du titre, et c'est tout. 

On retrouve un schema similaire dans un nombre grandissant de services d'achat en 
ligne, en particulier pour les hypermarches sur le Web. Faire des courses est un pro- 
cessus plus exigeant, ergonomiquement, que les achats en ligne classiques. Dans ces 
derniers, on achete un nombre assez restreint d'elements distincts : qu'il s'agisse de 
livres, CD-Rom, DVD, materiels de sport ou billets pour des spectacles, le panier 
reste relativement leger. Tandis que pour des courses, il enfle rapidement, pour 
atteindre plusieurs dizaines d'elements distincts. 

Devoir subir un aller-retour global pour chaque ajout decouragerait l'internaute, et 
les hypermarches Font bien compris. Toutefois, ils ont generalement recours a la 
technique eprouvee (et litteralement d'un autre siecle) des cadres {frames) afin 
d'aboutir a ce resultat : un cadre est dedie au panier, tandis qu'un ou plusieurs autres 
cadres affichent les rayons et produits. 

Ce type d'architecture est certes bien connu et maitrise des professionnels du Web, 
mais si les principaux avocats des standards du Web (W3C, WHAT WG, WaSP) et 
de l'accessibilite denigrent les cadres, ce n'est pas sans raison. 

Outre les obstacles majeurs a l'accessibilite qu'ils presentent (ils complexifient gran- 
dement la navigation, en particulier au clavier, ainsi que pour les utilisateurs mal- 
voyants et les logiciels qui les assistent), les cadres utilises ainsi engendrent une com- 
plexite importante dans le code JavaScript necessaire, sans parler des problemes de 
compatibilite entre navigateurs. 
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De plus en plus de boutiques en ligne font le saut vers une architecture tout Ajax qui 
permet de simplifier radicalement le code cote client, tant au niveau JavaScript que 
HTML, en particulier en utilisant des bibliotheques telles que Prototype, ou des fra- 
meworks dedies. Notons toutefois qu'un tel virage technologique doit etre accom- 
pagne d'une politique efficace d'accessibilite, comme nous le verrons au chapitre 7. 



Bien maitriser ses outils des : 
XHTML, CSS, JS, DOM et Ajax 

Realiser un site Web 2.0 ne repose pas sur une seule technologic Comme on le verra 
au chapitre 5, Ajax lui-meme n'est que la combinaison intelligente et novatrice de 
composantes techniques qui ne datent pourtant pas toutes d'hier. 

C'est precisement cet existant qui peut jouer des tours au developpeur, car il peut 
donner l'illusion d'une maitrise deja acquise, et l'amener a sauter, ou a tout le moins 
survoler, les chapitres et annexes dedies a XHTML, CSS, JavaScript et le DOM. Or, 
traiter ces sujets a la hussarde, en se disant que « 9a, je connais deja », constituerait a 
mon humble avis une erreur. 

Permettez-moi ici un bref aparte. Ces quatre dernieres annees, j'ai eu le plaisir 
d'enseigner a 1'INSIA, ecole d'ingenieurs en informatique en alternance situee a 
Paris. En charge de la specialisation SIGL (systemes d'information et genie logiciel), 
j'accorde une attention particuliere aux retours d'experience de nos etudiants 
(environ 700 depuis mon arrivee) sur leurs stages (3 jours par semaine en entreprise 
sur toute l'annee scolaire, soient 10 mois), notamment lorsque ces stages impliquent 
du developpement. 

S'il est une impression qu'on retrouve tres frequemment dans leurs recits, c'est celle 
d'un faible niveau de competences elementaires en technologies web cote client 
(toutes celles dont traite cet ouvrage) chez leurs collegues, tant stagiaires que profes- 
sionals chevronnes. Mais si on leur demande d'argumenter leur sentiment, on 
retrouvera toujours les memes remarques : « il ne connait rien au DOM », « elle n'a 
jamais entendu parler de balisage semantique », « ils mettent des ch'v partout, dont 
95 % sont superflus », « 9a ne marche que sur IE 6, et encore », « personne n'avait 
jamais ouvert une specification du W3C, c'etait totalement empirique », « a force de 
faire du Dreamweaver, ils etaient pieges quand 9a ne marchait plus », etc. 

Le constat fait reflechir : il n'est pas rare de voir etudiants, jeunes diplomes et profes- 
sionals afficher la maitrise ou 1' expertise de ces technologies alors qu'en realite, bon 
nombre d'entre eux ne maitrisent que tres partiellement ces sujets. 
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Essayer de determiner les causes de ce decalage releve davantage de l'essai sociolo- 
gique que du contexte de cet ouvrage. Mais il y a une lecon a en tirer, une conclusion 
decisive : les veritables experts sur ces technologies sont rares. Et comme tout ce qui 
est rare, ils sont precieux. Etre le depositaire de competences precieuses, c'est bon 
pour sa carriere. Mieux encore, associer a ces competences techniques un savoir-faire, 
une methodologie de travail coherente et efficace, c'est disposer d'un facteur diffe- 
renciant de premier plan, d'un avantage competitif indiscutable. 

C'est precisement l'objectif de cet ouvrage : tenter de vous amener a ce niveau de 
competences et de methode. Aux questions suivantes, combien vous laissent indecis, 
voire vous sont incomprehensibles ? 

• XHTML : Connaissez-vous la difference entre abbr et acronym ? Combien d'ele- 
ments dd sont possibles pour un meme dt ? A quoi sert l'attribut summary de 
table ? Y a-t-il une difference entre les attributs Tang et xml :lang ? A quoi sert 
f i el dset ? Et tabi ndex ? 

• CSS : A quelle version appartient opacity ? Comment fusionner les bordures des 
cellules d'un tableau? Quelle est la difference entre visibility et display? 
Peut-on appliquer une margin a un element inline? Pourquoi definir un 
position: relative sans chercher a repositionner 1' element lui-meme ? 

• JS : Qu'est-ce que Yunobstrusive JavaScript} Que dire des attributs href com- 
mencant par javascript: ? Qu'est-ce qu'une fermeture lexicale ? Comment 
declarer une methode de classe ? Quels problemes gravitent autour de la notion 
de binding ? 

• DOM : A quoi sert la methode eval uate ? Que se passe-t-il quand on insere un 
noeud deja present ailleurs dans le DOM ? Quel niveau a introduit les variantes 
NS ? Quelle difference y a-t-il entre nceud et element ? Une NodeList est-elle uti- 
lisable comme un simple tableau ? 

Ce livre n'apporte pas toutes les reponses a ces questions : s'il devait couvrir exhausti- 
vement toutes ces technologies, vous tiendriez entre les mains un pave de pres de 
mille pages, sans doute cher et peu maniable. Mais vous trouverez tout de meme de 
quoi acquerir des bases solides et, surtout, un sens de la qualite, qui vous permettront 
d'aller plus loin en toute confiance. D'ailleurs, la plupart des chapitres concluent par 
une serie de ressources, papier ou en ligne, precisement dans cette optique. 

Ne faites pas l'impasse sur les chapitres qui semblent deja connus, deja acquis. Si 
vous prenez le temps de les lire, j'aime a croire que vous y trouverez au moins quel- 
ques concepts ou donnees techniques qui vous etaient inconnus. Et puis, les sections 
finales de chaque chapitre sont la pour vous emmener encore plus loin. 
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Faire la part des choses : Ajax, c'est quoi au juste ? 

Le terme « Ajax » est apparu pour la premiere fois dans un article de Jesse James 
Garret, sur le site de sa societe Adaptive Path, le 18 fevrier 2005 (http:// 
www.adaptivepath.com/publications/essays/archives/000385.php). II s'agit done d'un 
terme relativement recent, qui est en realite l'acronyme de Asynchronous 
JavaScript + XML. 

L'article s'intitule Ajax: A New Approach to Web Applications. II insiste sur le fait 
quAjax n'est pas une technologie en tant que telle, mais la conjonction de technolo- 
gies existantes pour une utilisation combinee novatrice. Ici comme ailleurs, le tout est 
pourtant bien plus grand que la somme des parties. 

L'idee de base : la plupart des applications web, e'est-a-dire des applications dont 
l'interface graphique est affichee dans un navigateur, offrent une interaction pauvre et 
un confort d'utilisation plutot restreint, en particulier si on les compare aux applica- 
tions classiques, installees sur les postes utilisateurs. Dans une application web, on 
reste le plus souvent prisonnier du carcan requete/reponse : pour interagir avec l'appli- 
cation, qu'il s'agisse de valider la saisie de donnees ou de reorganiser les elements 
d'une liste, il faut avancer a petits pas, avec a chaque etape un aller-retour entre notre 
navigateur et le serveur, qui engendre un rechargement complet de la page. 

Par ailleurs, les possibilites offertes a l'utilisateur pour exprimer une demande ou rea- 
liser une action restent primaires : il est rare de voir un site proposer d'ajouter un pro- 
duit au panier simplement en glissant-deplacant le premier sur le second. Ces limita- 
tions habituelles auraient tres bien pu etre levees sans utiliser Ajax, comme ce fut 
d'ailleurs le cas sur une minorite de sites. Toutefois, en bouleversant notre concep- 
tion de ce qu'il etait possible de proposer comme interactions sur une page web, Ajax 
a naturellement remis sur le devant de la scene la question des interactions riches, 
notamment au travers du glisser-deplacer et des effets visuels. 

Ajax repose sur les technologies suivantes : 

• XHTML pour assurer un balisage semantique et coherent du document, ce qui 
assure que celui-ci sera correctement represente en memoire et done facilement 
manipulable. 

• CSS pour habiller ce balisage semantique et elargir la gamme des effets visuels 
utilisables pour communiquer avec l'utilisateur (comme signaler qu'un travail avec 
le serveur a lieu an arriere-plan, assister un glisser-deplacer, mettre en exergue un 
element fraichement ajoute a une liste). 

• DOM pour representer le document en memoire, afin d'en manipuler la structure 
et le contenu sans avoir, justement, a recharger toute la page. 
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• XML et, dans une moindre mesure, XSL/T, pour structurer les donnees echan- 
gees en coulisses entre la page deja chargee et le serveur, et transformer si neces- 
saire ces donnees en contenu affichable. 

• XMLHttpRequest, service originellement fourni par Microsoft dans MSIE depuis 
sa version 5, jusqu'alors meconnu du grand public malgre un interet technique qui 
avait conduit a son implementation ulterieure par les autres navigateurs. Le pre- 
mier A de Ajax, c'est lui : le moyen de communication asynchrone. 

• JavaScript enfin, qui relie tous ces elements entre eux. 

La ou une page web classique necessite un rechargement a chaque action, aussi gra- 
nulaire soit-elle (par exemple, la remontee d'un cran d'un element dans une liste, afin 
de l'amener tout en haut de celle-ci), une page exploitant Ajax interagit avec le ser- 
veur en coulisses, sans se recharger entierement. Un code JavaScript reagit a Faction 
de l'utilisateur en gerant un aller-retour interne avec le serveur, et met eventuelle- 
ment a jour la page directement en manipulant le DOM de celle-ci. Le schema sui- 
vant compare ces deux approches : 
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Vous aurez peut-etre remarque que dans la seconde approche, les donnees circulant 
du serveur vers le moteur Ajax sont marquees comme pouvant etre non seulement du 
XML, mais aussi du contenu directement affichable (HTML+CSS), du JavaScript 
ou des donnees JSON (JavaScript Object Notation, http://www.json.org). En effet, rien 
ne contraint le type de donnees renvoyees : il appartient au developpeur de deter- 
miner ce qui semble le plus pragmatique, et le plus pratique, au cas par cas. Dans les 
exemples du chapitre 5, nous mettrons en oeuvre plusieurs formats de retour pour 
illustrer quelques possibilites. 

Ce qu'il faut bien comprendre, c'est la nature profondement asynchrone de la com- 
munication entre le moteur Ajax et le serveur : pendant que celle-ci a lieu, l'interface 
utilisateur est toujours presente, et surtout, toujours active. L'utilisateur peut conti- 
nuer a utiliser la page, en effectuant d'autres actions tandis que la premiere est en 
cours de traitement. 

Bien entendu, il peut etre necessaire de limiter les actions possibles pendant certains 
traitements. Par exemple, lorsqu'un produit est en cours de retrait d'une commande, 
l'utilisateur ne devrait pas avoir la possibilite d'en modifier la quantite. Permettre a 
l'utilisateur d'effectuer des actions sans attendre la completion des precedentes 
impose la mise en place d'indications visuelles de traitement et de garde-fous. Nous 
verrons des exemples de mise en oeuvre au fil des chapitres. 



Plan (Tactions pour deux objectifs : 
methode et expertise 



Pour tirer le maximum de profit de ce livre, voici un plan d'actions : 

1 Commencez par l'annexe D pour configurer votre navigateur au mieux, afin de 
bien suivre les exemples de ce livre et d'augmenter radicalement votre productivite 
en developpement web. 

2 Si vous n'etes pas tres au point sur les fondamentaux « statiques » (XHTML, 
CSS), commencez par... les annexes ! Les annexes A et B auront tot fait de vous 
(re)mettre en selle. Quant a aller chercher les informations de detail par la suite, 
rien de tel que l'annexe C pour vous apprendre a naviguer confortablement dans 
les specifications. Par la suite, en lisant les chapitres, ne laissez pas une zone 
d'ombre vous irriter a l'arriere de votre lecture consciente : revenez aux annexes 
pour trouver l'information, ou y piocher les references de ressources detaillees 
aptes a vous la fournir. La difference entre le bon et 1' excellent reside dans la mai- 
trise des details autant que dans la vision globale. 
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A l'aise sur ces incontournables, prenez le temps de decouvrir, ou redecouvrir, Java- 
Script et le DOM au travers de la premiere partie et des chapitres 2 a 4. Au-dela de 
la technique, vous y trouverez de tres nombreux conseils et astuces methodologiques, 
et la trame d'une demarche qualite pour votre code futur. N'hesitez pas a faire des 
exercices, a fouiller les documentations referencees, a faire de nombreux mini-projets 
ou simples pages de test. Seule la pratique mene a la perfection. Sans une veritable 
maitrise de ces composantes, pas de bon developpement Ajax possible ! 
Vous pouvez ensuite tout naturellement continuer sur Ajax a proprement parler, 
tant dans son aspect purement « communications asynchrones en arriere-plan » 
(chapitre 5) qu'au travers de frameworks etablis permettant de donner un coup de 
fouet a votre productivite (chapitre 6) et vous ouvrant les portes d'effets visuels et 
de comportements impressionnants (chapitre 7). Bien employes, ces derniers 
donnent des interfaces haut de gamme. Ne laissez toutefois pas l'euphorie techni- 
que vous faire oublier l'importance des considerations d'ergonomie et d'accessibi- 
lite, qui font toute la difference entre le « peut mieux faire » et le « rien a redire ». 
Pour ouvrir vos horizons et explorer des cas concrets d'utilisation, rien de tel que 
d'etudier des exemples d'interaction Ajax entre vos pages, eventuellement votre 
couche serveur, et les services disponibles sur le Web. Apprenez a combiner Ajax, 
services web, API REST et flux RSS/Atom pour obtenir des interfaces riches en 
contenu et en fonctionnalites. 



Alors, prets ? Partez ! 



Premiere Partie 




Donner vie 
aux pages 




Ca y est, on se lance. Vbus choisissez de ne pas sauter cette partie, et vous avez bien 
raison. Meme si vous pensez en connaitre l'essentiel, voire toutes les ficelles, Java- 
Script et le DOM sont des technologies riches et complexes, dont on ha generale- 
ment pas fait tout le tour, et qu'on a trop souvent decouvertes de facon tres empirique. 

Pourtant, sans une veritable maitrise de ces technologies, il est difficile de produire 
des sites web 2.0 de qualite, ou meme simplement robustes et sans bogues. 

Les deux prochains chapitres s'appliquent a vous fournir une connaissance solide et 
qualitative des bases de JavaScript et du DOM (d'aucuns trouveront d'ailleurs qu'ils 
vont bien plus loin que l'idee qu'ils se font des bases, ce qui donne une mesure de leur 
ampleur reelle !). Armes de ces connaissances fiables, vous haurez aucun mal a aller 
rechercher les details supplementaires dans les specifications concernees (et si la forme 
de ces dernieres vous rebute, un petit tour par l'annexe C vous remettra vite en selle). 

Mais la productivite ne se satisfait pas toujours d'une connaissance parfaite des 
petits rouages internes : elle a souvent besoin d'outils plus evolues que le seul lan- 
gage, les interfaces nues, etc. C'est pourquoi le chapitre 4 va faire vos delices avec 
l'extraordinaire bibliotheque JavaScript nommee Prototype, qui jouit deja d'une 
enorme popularite. Grace a elle, vous allez revolutionner votre facon d'ecrire du 
JavaScript, et gagner en productivite de facon significative. En plus de cela, vous 
trouverez probablement l'ecriture de code JavaScript plus... agreable et plus sympa- 
thique, peut-etre meme plus amusante. 

Allez, on retrousse ses manches, et on va essayer de regarder JavaScript, ce langage 
si mal connu, voire mal compris, avec des yeux tout neufs... 




2 
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pour ce qu'il n'est pas 



JavaScript est sans doute un des langages les plus incompris de la planete. Tout le 
monde pense le connaitre, croit le maitriser et le prend neanmoins pour un langage 
de seconde zone, aux possibilites limitees, meme pas capable de faire de l'objet ou de 
gerer les exceptions ! 

Rien n'est plus faux. JavaScript est un langage dynamiquement type dote de la plu- 
part des possibilites usuelles, en depit d'une syntaxe pas toujours tres expressive. De 
nombreuses possibilites avancees, qui ouvrent les vannes a un veritable torrent de 
fonctionnalites puissantes, sont souvent mal connues voire inconnues des deve- 
loppeurs web. Et pourtant, le langage offre de quoi mettre sur pied des bibliotheques 
comme Prototype (etudiee au chapitre 4), qui rendent l'utilisation quotidienne 
presque aussi agreable que du scripting Ruby ! 

Ce chapitre est la pour rendre justice a JavaScript en detaillant certains points sou- 
vent mal connus et en faisant la lumiere sur certaines fonctionnalites avancees qui 
restent trop souvent dans l'ombre. A Tissue de ce chapitre, vous serez plus a l'aise 
pour aller examiner le code de bibliotheques JavaScript avancees, comme Prototype 
ou script.aculo.us, et creer vos propres bibliotheques haut de gamme. 
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Mythes et rumeurs sur JavaScript 

Commencons par battre en breche certains mythes autour de JavaScript qui, comme 
tous les mythes, ont la vie dure. 

JavaScript serait une version allegee de Java 

Voila une idee recue tres repandue, qui vient bien entendu de la similarite des noms 
entre les deux langages. Le createur du langage l'avait d'abord baptise LiveScript. 
Or, en 1995, Netscape sortait la version 2.0 de son navigateur : Netscape 
Communicator 2.0, qui continuait a pousser en avant Java, fraichement mis au point 
par Sun Microsystems, au travers des applets. Netscape 2.0 fournissait egalement 
LiveScript, un langage de script cense rendre les pages plus vivantes, et qui permet- 
tait notamment de manipuler en partie les applets. 

Dans un souci de marketing, le langage de script, dont on ne percevait pas encore 
l'extraordinaire potentiel, a ete renomme JavaScript, et decrit comme un langage 
« complement de Java » dans un communique de presse commun de Netscape et Sun 
Microsystems : http://wp.netscape.com/newsref/pr/newsrelease67.html. 

Neanmoins, les deux langages sont tres differents. Java est un langage compile (en 
code intermediaire, certes, mais compile tout de meme), avec un systeme de typage 
statique, une syntaxe rigoureuse et assez verbeuse, et concentre sur la representation 
de classes et d'objets. 

JavaScript, en revanche, est avant tout un langage de script. Cela signifie qu'il est 
concu pour etre utilise avec tres peu de contraintes et une grande agilite : syntaxe 
minimaliste et plus flexible, typage dynamique, execution interpretee, etc. Par 
ailleurs, en depit de la presence de concepts objet (objets, instances, champs, 
methodes, exceptions, etc.), les aspects plus avances (heritage, polymorphisme, 
encapsulation, methodes abstraites, interfaces, etc.) sont soit absents, soit pris en 
charge par une syntaxe confuse. 

Ce n'est pas que Java est mieux que JavaScript, ou inversement : les deux langages 
repondent a des besoins radicalement separes, sont concus par des equipes parfaite- 
ment distinctes et suivent des evolutions tout a fait autonomes. 

JavaScript ne serait base sur aucun standard 

Si JavaScript a vu le jour en tant que projet interne chez Netscape, il a ete standardise 
tres tot, des sa version 1.1, par un comite de l'ECMA, organisme de standardisation 
international, qui continue de le faire evoluer. Le standard ECMA-262 specifie 
EcmaScript, qui represente en quelque sorte le « JavaScript standard ». La seconde 
edition constitue egalement un standard ISO (ISO/IEC 16262 pour les curieux). 
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La troisieme edition, qui est aussi la version actuellement finalisee, correspond a 
JavaScript 1.5 et date de decembre 1999. Tout le travail devolution de JavaScript a 
lieu dans le groupe de travail TGI a l'ECMA, dirige par l'inventeur original du lan- 
gage, Brendan Eich, employe par la fondation Mozilla. 

Une version intermediate 1.6 est actuellement prise en charge par Firefox 1.5, et une 
version 1.7, qui inclura deja des ameliorations radicales inspirees par d'autres lan- 
gages de script (generateurs, iterateurs, comprehensions de tableaux, affectations 
multiples, etc.) est disponible dans Firefox 2, sorti a l'automne 2006. 

JavaScript serait lent 

A l'origine, JavaScript etait lent, comme l'etaient Java, Perl, Python ou Ruby. Mais la 
technologie des langages de script et des machines virtuelles a enormement evolue 
depuis, et tous ces langages sont aujourd'hui relativement rapides. Dans la pratique, 
on n'a plus de difficulte a faire tourner rapidement des pages applicatives complexes 
mettant en oeuvre de nombreux gestionnaires d'evenements, des requetes Ajax simul- 
tanees, et des mises a jour visuelles dues aux regies CSS. 

On peut meme sortir de la page web pour se pencher sur le navigateur lui-meme : 
l'interface graphique de Firefox, par exemple, est decrite en XUL, un langage base sur 
XML, et son fonctionnement est ecrit en JavaScript. Meme chose pour Thunderbird. 
Ce n'est d'ailleurs pas sans raison que les fichiers de preferences de ces programmes, 
nommes prefs.js, decrivent les preferences utilisateurs sous forme de code 
JavaScript. Et pourtant, ces deux programmes sont tees confortables a l'utilisation ! 

JavaScript serait un langage jouet, peu puissant 

Ses origines modestes ont enracine l'image d'un langage jouet, image dont souffrent 
d'ailleurs presque toujours les langages de script, en particulier aux yeux des aficio- 
nados de langages plus rigoureux, plus « serieux », comme C++ ou Java. 

Et pourtant, il y a 10 ans, Java lui-meme etait dans le camp des « petits », des lan- 
gages jouets. Davantage d'outils apparaissent chaque jour dans l'univers Linux, qui 
sont ecrits en Python ou en Ruby. Et aujourd'hui, de plus en plus d'applications sont 
realisees sur la base de XULRunner, la plate-forme d'execution de Mozilla basee sur 
XUL, C++ et JavaScript. 

Independamment de son utilisation commune, JavaScript n'en est pas moins un 
langage dote des quelques fonctionnalites critiques aptes a lui permettre de faire de 
grandes choses. Lesquelles, d'ailleurs, manquent souvent aux langages de meilleure 
stature. Dans ce chapitre, nous aurons l'occasion d'en decouvrir un certain nombre ; 
attendez-vous a d'agreables surprises... 



Dormer vie aux pages 

Premiere partie 

S'y retrouver entre JavaScript, EcmaScript, JScript et 
ActiveScript 

La comprehension de JavaScript n'est pas facilitee par la pluralite du paysage. On 
entend parler de JavaScript, de JScript, d'ActiveScript, d'EcmaScript... Comment s'y 
retrouver ? Void quelques points de repere. 

• JavaScript est le langage d'origine, qui s'appelait LiveScript avant de faire sa sortie 
publique. Apres sa version 1.1, il evolue au sein de l'ECMA, organisme de standar- 
disation au niveau international, sous le nom coquet de ECMA-262, dont la 3 e edi- 
tion (version actuelle) correspond a JavaScript 1.5. La prochaine edition, due au 
deuxieme trimestre 2007, constituera JavaScript 2. Ce langage est pris en charge, 
dans le respect du standard, par la vaste majorite des navigateurs, dont (naturelle- 
ment) Mozilla, Firefox et Camino, mais aussi Opera, Safari et Konqueror. MSIE 
prend en charge l'essentiel (voir ci-dessous). 

• JScript est le nom donne par Microsoft a son implementation de JavaScript. II 
s'agit grosso modo d'une prise en charge a 95 % de JavaScript, augmentee d'un 
certain nombre d'extensions proprietaires, par exemple la classe ActiveXObject et 
la methode CetObject. Cette variante n'est, bien entendu, disponible que sur 
MSIE, et c'est elle qui est documented dans le MSDN. MSIE 6 fournit 
Jscript 5.6, qui correspond a peu pres a JavaScript 1.5. 

• ActiveScript n'est pas un langage, mais le moteur d'execution de scripts, sous 
Windows, qui permet a une application d'executer du code dans plusieurs langa- 
ges de script, generalement mis a disposition du moteur sous forme de plug-ins. 
Ainsi, Windows 2000 et Windows XP, qui disposent d'un service nomme WSH 
(Windows Scripting Host), fournissent ActiveScript (c'est pourquoi en double- 
cliquant sur un fichier . js sous Windows, il tentera d'executer le script comme 
un programme classique ; WSH est une source majeure de failles de securite dans 
Windows...). ASP et ASP.NET utilisent aussi ActiveScript. 



Tout ce que vous ne soupconniez pas : les recoins du 
langage 

Void le cceur du chapitre. Cette section sert un double objectif : 
1 Reprendre des aspects du langage souvent traites par-dessus la jambe, et qui sont 

done mal maitrises, mal connus, entrainant des erreurs d'utilisation par inadver- 

tance et des debogages difficiles. 
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2 Mettre en lumiere des aspects souvent inconnus du langage, parfois avances il est 
vrai, mais qui constituent les fondations sur lesquelles repose l'extensibilite du 
langage. Sans ces aspects, des bibliotheques aussi furieusement utiles que Proto- 
type, par exemple, n'auraient jamais pu voir le jour. 

Variables declarees ou non declarees ? 

Vous savez probablement qu'en JavaScript, il est inutile de declarer de variables. 
Cette simple affirmation n'est pourtant pas tout a fait exacte. Une variable non 
declaree se comporte differemment d'une variable declaree. Prenons l'exemple de 
code suivant : 

Listing 2-1 Difference entre variables declarees et non declarees 

var total = 0; 
var factor = 5; 
var result = 42 ; 

function compute(base, factor) { 

result = base * factor; 

factor *= 2 ; 

var total = result + factor; 

return total ; 
} // compute 

alert('compute(5, 4) = ' + compute(5, 4)); 
alert('total = ' + total + ' -- factor = ' + factor + 
' -- result = ' + result); 

Selon vous, que va afficher ce script ? 

Le premier affichage est sans piege : result vaut d'abord 5x4 = 20, factor passe a 
4 x 2 = 8, et total vaut 20 + 8 = 28. On obtient en effet 28. 

A present, le deuxieme affichage utilise nos variables total, factor et result. II 
s'agit bien sur des variables declarees en haut de script, puisque notre affichage est 
hors de la fonction compute, et n'a done pas acces aux declarations qui y figurent. On 
devrait done voir s'afficher les resultats de nos affectations : 0, 5 et 42, respective- 
ment. Et pourtant, stupeur : on obtient 0, 5 et 28 ! Que s'est-il passe ? 

C'est bien simple : dans une fonction, utiliser une variable sans la declarer revient a 
utiliser une variable globale, creee pour l'occasion si besoin. Je dis bien « variable », 
car les arguments d'une fonction ne sont pas assujettis a cette regie : vous voyez que 
la modification de factor, dans la fonction compute, ne touche pas a la variable 
factor declaree plus haut. On ne modifie que la valeur locale de l'argument factor 
passe a la fonction. 
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Puisque dans la fonction, result n'a pas ete declaree, et qu'une variable externe 
result existe, c'est cette variable qui sera utilisee. En revanche, total etant ici 
declaree (mot reserve var), on obtient une variable locale, et on ne touche pas a la 
variable externe total . 

Je vous conseille done de toujours declarer vos variables, quitte a le faire a la volee 
quand la syntaxe le permet, comme pour un index de boucle : 

for (var index = 0; index < elements. length ; ++index) 

En effet, cela garantit que vous ne touchez pas aux variables globales existantes, et 
que vous n'avez pas de « fuites », en creant des variables globales inutiles, qui stoc- 
kent une information normalement interne a votre fonction. Le script suivant illustre 
bien cette infraction au principe d'encapsulation : 

Listing 2-2 Un exemple de « fuite » de donnee par non-declaration 

function secretStuff () { 

// traitement confidentiel , avec dedans : 

privateKey = OxDEADBEEF; 

// fin du traitement 
} 

secretStuff () ; 
alert (privateKey) ; 

Les cas ou vos fonctions veulent effectivement manipuler des variables globales sont 
rares, pour la simple raison que les variables globales sont, dans un code de qualite, 
rarissimes. Et je ne vous park pas des oublis de var dans des fonctions recursives, 
c'est un souvenir trop douloureux... 

Ceci dit, quand vous en declarez neanmoins, vous vous demandez peut-etre quel 
interet il y aurait a utiliser « var » devant le nom, puisqu'on est de toutes facons au 
niveau global ? II n'y a pas d'interet technique clair, mais cela ameliorera la lisibilite. 
Prenez par exemple le script suivant : 

MAX = 42; 
total =0.0; 
count = 0; 

Comment savoir de facon certaine quelles declarations constituent des constantes et 
quelles autres constituent des variables ? Bien sur, le respect d'une norme de nom- 
mage, qui demande generalement qu'on ecrive les constantes en majuscules, nous 
suggere que MAX est une constante, et total et count des variables. 
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Mais on n'est pas pour autant a la merci d'un developpeur peu rigoureux, qui aura 
juste appele ses donnees ainsi sans trop reflechir, et n'adhere pas a la norme. Cas 
encore plus frequent, peut-etre MAX a-t-elle ete initialement concue comme une cons- 
tante, mais au fil du temps la conception a evolue, et aujourd'hui le script la modifie 
parfois, sans qu'on ait pris la peine de renommer l'identifiant. 

Voila pourquoi des mots reserves comme const et var sont toujours utiles. La ver- 
sion explicite du script ne laisse pas de place au doute, et necessitera une mise a jour 
lorsque revolution du code voudrait rendre MAX modifiable : 

const MAX = 42; 
var total =0.0; 
var count = 0; 

Comment, vous ne saviez pas que JavaScript avait le mot reserve const ? Vous voyez 
que ce chapitre va vous apprendre des choses... Helas, je suis bien oblige de mettre un 
bemol : const est une extension a JavaScript 1.5 par Mozilla. II figure normalement 
dans les versions 1.6, 1.7 et la prochaine version 2.0, mais pas dans 1.5 et son standard 
de base, ECMA-262 3 e edition. Aussi, MSIE et Opera ne le prennent pas en charge. 

Par consequent, vous ne trouverez helas pas de const dans les exemples a venir et 
l'archive des codes source pour cet ouvrage. Les constantes seront simplement au 
niveau global, en majuscules, sans var. C'est le mieux qu'on puisse faire pour etre 
portable sur MSIE et Opera. En revanche, si vous garantissez le pare client (Mozilla, 
Firefox, Camino, Konqueror), n'hesitez pas ! 

Types de donnees 

Certes, JavaScript ne type pas ses variables, arguments et constantes, ce qui ne 
manque pas d'offenser les partisans des langages statiquement types, comme C++, 
Java ou C#. Ceux qui evoluent quotidiennement dans des langages dynamiquement 
types, comme JavaScript, Ruby, Python ou Perl, retorqueront plutot « et alors ? ». 

Que le type ne soit pas declare ne signifie absolument pas qu'il n'y a pas de type. En 
revanche, une variable peut changer de type au gre de ses affectations. Et lorsqu'on 
tentera d'utiliser une variable contrairement a son type actuel, JavaScript nous rap- 
pellera a l'ordre en produisant une erreur. 

JavaScript dispose tout de meme d'un certain nombre de types fondamentaux. Ces 
types sont plus riches que les descriptions renvoyees pour leurs valeurs par l'operateur 
typeof, soit dit en passant. Vbici un petit tableau recapitulatif pour JavaScript 1.5, 
disponible a peu pres partout. 
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Tableau 2-1 Types de donnees de JavaScript et valeurs de typeof 



Type typeof Description 


Array object Tableau classique, a dimensions quelconques (ex. [], [1, 2, 3]). 


Boolean 


boolean 


Valeur booleenne : true ou fal se. 


Date 


object 


Date et heure : new Date (...). 


Error 


object 


Erreur survenue a I'execution, generalement capturee par un catch. 


Function 


object 


Cas particulier : on parle ici d'objets fonctions, obtenus en faisant new 
Function(. . .) {...}. 

Si on passe a typeof une fonction directement (ex. typeof Math . sq rt, 
ou encore typeof document . createEl ement), on obtient logiquement 
'function' . 


Math 


(voir texte) 


Math est un singleton (il n'existe qu'un seul objet Math a tout instant, tou- 

jours le meme) jouant un role d'espace de noms : typeof Math renvoie done 

'object'. 

Pour les objets predefinis (tous les autres dans cette liste), typeof LeType 

renvoie ' f uncti on ' , car le nom de I'objet est assimile a son constructeur. 


Number 


number 


Nombre (toujours flottant en JavaScript), equivalent doubl e (double precision 
IEEE 754). 


Object object Un objet quelconque, y compris ceux issus du DOM. 


RegExp 


function 


Une expression rationnelle (type d'objet). Si vous ne savez pas de quoi il s'agit, 
ou les maitrisez mal, je ne saurais trap vous recommander d'apprendre (voir 
bibliographie de fin de chapitre). Disponibles dans pratiquement tous les langa- 
ges, les expressions rationnelles sont fabuleusement utiles pour le traitement 
avance de textes. 


String 


string 


Une chame de caracteres (type d'objet). 



Tout objet dispose de proprietes (ou champs, ou attributs : des donnees dans I'objet) 
et de methodes (ou operations, ou fonctions membres : des fonctions dans I'objet). 
On peut egalement simuler la notion de proprietes et fonctions statiques. 

Chaque objet a notamment une propriete prototype, extremement utile, que nous 
aborderons plus en detail un peu plus loin dans ce chapitre, a la section Ameliorer les 
objets existants. 



Ne prenez pas JavaScript pour ce qu'il n'est pas 

Chapitre 2 



Fonctions et valeurs disponibles partout 

JavaScript propose un certain nombre de fonctions globales, accessibles de n'importe 
ou. Apres une rapide liste, je reviendrai sur certains points delicats souvent meconnus 
autour de certaines fonctions. 



Tableau 2-2 Fonctions globales de JavaScript 



Fonction Description 


Array, Boolean, Date... 


Chaque objet predefini a une fonction constructeur associee, qui peut assurer certaines 
conversions appropriees suivant le cas. C'est pourquoi typeof Array et typeof 
Date renvoient 'function ', d'ailleurs. 


decodeURI 


Symetrique de encodeURI (voir plus bas). 


decodeURIComponent 


Symetrique de encodeURIComponent (voir plus bas). 


encodeURI 


Encode un URI (une URL, pour simplifier) conformement aux regies d'encodage URL (hor- 
mis les minuscules et majuscules non accentuees, les chiffres et certains signes de ponc- 
tuation, tout caractere est transforme en sequence hexadecimale %xx voire %uuuu si on 
est en Unicode). Laisse toutefois le debut de I'URL (avant le ? qui marque le debut des 
parametres) intacte. 

Parexemple, 'bonjour marc & olivier ! ' devient 
'bonjour%20marc%20&%20o"livier%20! '. 


encodeURIComponent 


Encode un composant d'URI/URL : ne laisse done aucun caractere special intact. 


eval 


Fonction tres importante : elle permet d'executer un code JavaScript stocke dans une 
chatne de caracteres. Cette capacite du langage a s'auto-executer est critique, et permet 
d'avoir des types de reponse JavaScript ou plus specifiquement JSON dans un contexte 
Ajax, par exemple. On peut tout imaginer avec cette possibility : code automodifiant, 
code delegue, et j'en passe. 


is Finite 


Permet de determiner si la valeur stockee dans un Number estfinie (true)ou infinie 
(fal se). Plus pratique et plus performant que les tests manuels sur 
Number . NECATIVE_INFINITY, Number . POSITIVE_INFINITY et 
Number . NaN, par exemple. 


isNaN 


Seule maniere fiable de detecter qu'un Number ne contient pas une valeur numerique 
valide (par exemple, s'il a recu le resultat d'une division de zero par zero). En effet, la 
constante NaN (Wot a Number) n'est, par definition, egale a aucun Number, pas meme 
a NaN lui-meme. Le test (x == NaN) echouera toujours... 


parseFloat 


Convertit un texte en nombre flottant. Neanmoins, le fonctionnement de la conversion 
est souvent mal compris, comme nous le verrons plus bas. 


parselnt 


Convertit un texte en nombre entier. Ne pas preciser la base peut causer des soucis en 
traitant des representations utilisant un remplissage a gauche par des zeros, sans parler 
du mecanisme de conversion qui, comme pour parseFT oat, est souvent mal compris 
(voir plus bas). 
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On trouve egalement trois valeurs globales, constantes ou non, dites proprietes 
globales : 

Tableau 2-3 Proprietes globales de JavaScript 





Infinity 


Variable initialement a Number . POSITIVE_INFINITY. Je ne vois pas pourquoi la 
modifier, aussi preferez les proprietes plus explicites de Number (infinite negative et 
positive). 


NaN 


Variable initialement a Number .NaN, qu'on ne modifie normalement jamais ; juste 
un raccourci. 


undefined 


Variable equivalente a la valeur primitive du meme nom. Permet de simplifier des tests 
du genre (' undefined' == typeof x) en (undefined === x) grace a 
I'operateur d'egalite stricte. 



Les mysteres de parseFloat et parselnt 

Toujours indiquer la base, sinon... 

Commencons par expliciter le deuxieme argument, optionnel, de parselnt : l'argu- 
ment nomme radix. II s'agit de la base numerique pour la conversion. Les valeurs 
possibles sont : 

• (valeur par defaut) pour une « detection » de la base (voir plus bas). 

• 2a 36, qui utilisent les chiffres de a 9 puis autant de lettres de l'alphabet que 
necessaire, sans preter attention a la casse. Ainsi, en base 16 (hexadecimale), on 
utilise 0-9 et A-F. En base 36, on va jusqu'a Z. 

De nombreux developpeurs web ne savent meme pas que ce deuxieme parametre 
existe ou ne pensent pas a l'utiliser. Le probleme est que, s'il n'est pas precise, il prend 
la valeur zero, et aboutit a une detection automatique de la base selon les premiers 
caracteres du texte : 

• Si le texte commence par Ox ou OX, la suite est de l'hexadecimal. 

• S'il commence juste par (zero), la suite est de l'octal (base 8). 

• Sinon, c'est du decimal. 

C'est le deuxieme cas qui pose regulierement un souci. 

Imaginez par exemple que vous avez un formulaire avec une saisie manuelle de date 
au format, disons, j j/mm/aaaa. D'ailleurs, un tel texte peut vous etre transmis autre- 
ment que par une saisie de formulaire... Toujours est-il que vous souhaitez en extraire 
le mois. La plupart du temps, on precede (a tort) ainsi : 

var month = parselnt(text .substring(3, 5)); 
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Suivant le cas, text.substring(3, 5) renverra '01', '02'... '10', '11' ou '12' 
(pour un numero de mois valide, en tout cas !). La-dessus, vous appelez parselnt 
avec simplement cette portion de texte. Pour un mois jusqu'a juillet inclus, 9a mar- 
chera. Mais aout et septembre passent mysterieusement a la trappe ! Vous recuperez 
alors zero. 

Eh oui ! Faute d'avoir precise la base (10, dans notre cas), vous avez laisse parselnt 
la detecter, et le zero initial Fa fait opter pour de Foetal, ou seuls les chiffres a 7 sont 
autorises. II convient done d'etre toujours explicite dans 1'emploi de parselnt, ce qui 
signifie generalement la base 10 : 

var month = parselnt(text .substring(3, 5), 10); 

Une conversion plutot laxiste 

Passons a present a un comportement meconnu commun aux deux fonctions. Tout 
d'abord, il faut savoir que les espaces prefixes et suffixes sont ignores, ce qui est en soi 
pratique : 

parselnt('25') == parselntC 25 ') == parselnt('25 ') == 25 

Ce qui peut pieger le developpeur est le comportement de ces fonctions en cas de 
caractere invalide. On a deux cas de figure : un texte invalide des le premier caractere, 
et un texte dont le premier caractere est valide. 

Dans le premier cas, on recupere automatiquement NaN : 

var result = parselntC dommage' , 10); 
alert(isNaN(result)) ; // true 

Dans le second cas, seul le debut du texte est utilise, et le reste est silencieusement 
ignore, ni vu, ni connu ! C'est en particulier un probleme pour de la validation de 
saisie, par exemple. Beaucoup de developpeurs ecrivent un code du type : 

var value = parselnt (field. value, 10); 

// ou parseFloat(field. value) , selon ce qu'on veut... 

if (isNaN (value)) 

// traitement de l'erreur 

Helas ! Ca ne suffit pas. Dans un tel contexte, le texte « 42dommage » passera sans 
probleme : on recuperera juste 42. Pourtant, nous souhaitons generalement verifier 
que l'ensemble du texte est valide, pas seulement le debut ! 
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La solution est relativement simple : il suffit de convertir a nouveau la valeur nume- 
rique en texte. Si le resultat est identique au texte d'origine, on est tranquille ! A un 
detail pres toutefois : les espaces de debut et de fin, qui ne seront plus la. 

Si vous souhaitez effectivement les ignorer, il faudra d'abord les supprimer vous- 
meme, pour avoir un texte de reference comparable a celui que vous obtiendrez par la 
conversion reciproque. Une telle suppression se fait facilement avec la methode 
replace des objets String :. Void done une fonction generique de test pour valeurs 
numeriques : 

Listing 2-3 Une fonction simple de validation de valeur numerique 

function isVa"lidNumber(text, intsOnly) { 

text = text. repl ace (/A\s+|\s+$/g, ''); 

var value = intsOnly ? parselnt(text, 10) : parseFloat(text) ; 

return String(value) === text; 
} // isValidNumber 

Si l'expression rationnelle employee vous ebranle, je vous encourage encore une fois a 
apprendre leur syntaxe (par exemple, en apprenant sur http://www.expreg.com/presen- 
tation.php, qui mis a part sa specificite PHP, presente les syntaxes universelles). Void 
tout de meme une explication : 

• a\ s + signifie « un nombre quelconque positif d'espaces en debut de texte » 

• | signifie OU 

• \s+$ signifie « un nombre quelconque positif d'espaces en fin de texte » 

• g est un drapeau indiquant « remplace toutes les occurrences ». Sans lui, si on reti- 
rait des espaces au debut, on n'en supprimerait pas a la fin... 

On remplace les portions qui correspondent a ce motif par un texte vide, ce qui dans 
la pratique elimine les espaces prefixes et suffixes. 

Que donne isValidNumber('42dommage') ? intsOnly n'etant pas specifie, il vaut 
undef i ned, ce qui correspond au booleen f al se, et notre operateur ternaire (? : ) utilise 
done parseFloat, lequel renvoie juste 42. La conversion inverse en texte donne natu- 
rellement ' 42 ' , qui n'est pas egal a ' 42dommage ' , done on retourne f al se. 

Et pour un texte vraiment inutilisable ? Par exemple, isValidNumber('truc' , 
true) ? Ici on a intsOnly a true, done onappelle parselnt('truc' , 10), qui renvoie 
NaN. Converti en String, cela donne evidemment 'NaN', qui n'est pas egal a 'true 1 . 
On renvoie bien f al se. 

Voila de quoi eviter bien des cauchemars. 
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Rappels sur les structures de controle 



Les grands classiques 

Vous connaissez normalement les grandes structures de controle classiques, qui sont 
les memes en JavaScript qu'en C, C++, Java, PHP et bien d'autres. Void leurs aspects 
generaux, qui ne changent strictement rien a vos habitudes : 





Tableau 2-4 Aspects generaux des structures de controle usuelles 




if/else for while do/while 


switch/case 


if (cond) 


for (init; cond; incr) 


while (cond) 


do { 


switch (expr) { 


else if (cond) 


{ 
} 


{ 
} 


} while (cond) ; 


case expr: 
break; 


else 








case expr2: 

break; 
default: 

} 



Petite difference entre le for JavaScript et le for C++/Java ceci dit : si vous declarez 
une variable d'index a la volee : for (var i ndex = . . . , cette variable en JavaScript ne 
sera pas locale a la boucle : elle existera dans la meme portee que la boucle elle-meme. 

Vous connaissez aussi probablement les traditionnelles instructions break et 
continue, egalement presentes dans les langages cites plus haut : break quitte la 
boucle courante, tandis que continue saute immediatement au tour suivant (ou 
quitte la boucle si c'etait son dernier tour). 

Labelisation de boucles 

En revanche, tous les langages ne permettent pas a break et conti nue d'etre labelisees. 
II existe en effet une syntaxe qui permet d'affecter un nom a une boucle. L'avantage est 
qu'on peut alors fournir ce nom a un break ou un continue, qui vont fonctionner au 
niveau de la boucle ainsi nommee, plutot qu'au niveau de la boucle courante. On peut 
done sortir de, ou court-circuiter, plusieurs niveaux de boucle imbriques. 

Voici un exemple de recherche dans un cube de donnees, qui permet de quitter les 
trois niveaux de boucle des que l'element cherche a ete trouve (ce qui est largement 
preferable au fait de laisser les trois boucles se derouler !), sans avoir a gerer un boo- 
leen found supplementaire. 
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Listing 2-4 Un exemple pertinent de break labelisee 

function findAndShow(cube, value) { 

var coords = null ; 
outerLoop: 

for (var x = 0; x < cube. length; ++x) 

for (var y = 0; y < cube[x] . length ; ++y) 

for (var z = 0; z < cube [x] [y] .length ; ++z) 
if (cube[x] [y] [z] == value) { 
coords = [x, y , z] ; 
break outerLoop; 

} 
alert(coords 

? 'Trouve en ' + coords. join(' , ') 
: ' Pas trouve') ; 
} // findAndShow 

for.. .in 

Une boucle JavaScript mal connue, ou mal comprise, est le for...in. Sa syntaxe est 
tres simple : 

for (variable in object) 



Contrairement a une idee recue, ou simplement a l'intuition, cette boucle ne permet 
pas (helas !) d'iterer sur les elements d'un tableau ! Non, son role est tout autre : elle 
itere sur les proprietes de l'objet. 

On peut done obtenir une liste des noms des proprietes d'un objet quelconque avec le 
code suivant, par exemple : 

Listing 2-5 Enumeration des methodes d'un objet avec for.. .in 

function showProperties(obj) { 

var props = [] ; 

for (var prop in obj) 
props. push(prop) ; 

alert(props. join(' , ')); 
} // show/Properties 

On utilise ici un aspect peu connu de JavaScript, que nous reverrons plus tard : les 
operateurs [] et . sont presque synonymes. Pour acceder a une propriete d'un objet 
obj, alors que le nom de la propriete est stocke dans une variable prop, on ne peut 
pas faire obj. prop (cela chercherait une propriete nommee « prop »), mais 
obj [prop] fonctionne ! 
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Ainsi, le code suivant : 

I showProperties([' christophe' , 'elodie', 'muriel']); 

produira l'affichage suivant : 

0, 1, 2 

Mais... De quoi s'agit-il ? En fait, sur un tableau, les proprietes detectables sont les 
indices existants du tableau. On a ici trois elements, done les indices 0, 1 et 2. Cet 
exemple n'est pas tres convaincant, et nous n'aurons pas plus de chance sur tous les 
objets natifs de JavaScript : nous n'aurons que les proprietes (ou methodes) ajoutees 
par extension de leur prototype, done faute de code prealable, on n'obtiendra rien. 

Tentons plutot un saut en avant vers le chapitre 3, consacre au DOM, et testons ceci : 

I showProperties(document .implementation) ; 

Sur un navigateur conforme aux standards, on obtiendra : 

hasFeature, createDocumentType, createDocument 

Ah ! Voila qui est plus sympathique. Ce sont bien en effet les trois methodes prevues 
par l'interface DOMImplementation, proposees par l'objet document. implementation. 
Notez qu'on a obtenu des methodes, pas de simples champs. Les methodes consti- 
tuent aussi des proprietes. 

Simplifier I'acces repetitif a un objet avec with 

Pour terminer, precisons une derniere structure de controle fort pratique dans cer- 
tains cas, qu'on retrouve egalement en Delphi (bien que les deux langages soient sans 
aucun rapport !) : le with. 

Ce mot reserve permet d'etendre la portee courante en lui ajoutant celle d'un objet 
precis. Qu'est-ce que la portee ? Disons qu'il s'agit de l'ensemble des endroits ou 
l'interpreteur va rechercher un identifiant. Par exemple quand vous tapez : 

alert(someName) ; 

Ou JavaScript va-t-il chercher someName ? Par defaut, comme beaucoup de langages, 
il suit le chemin classique : le bloc courant, son bloc parent, et ainsi de suite jusqu'a la 
fonction. S'il est dans une methode, il cherchera alors dans l'objet conteneur. Puis 
dans les eventuels espaces de noms contenant l'objet. Et enfin au niveau global. S'il 
ne trouve rien, vous obtiendrez une erreur. 
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Etendre la portee en lui rajoutant le contexte d'un objet precis est tres utile pour sim- 
plifier ce genre de code : 

Listing 2-6 Un exemple typique de code qui beneficierait d'un with... 

field. style. border = 'lpx solid red'; 
field. style. margin = 'lem 0'; 
field. style. backgroundColor = '#fdd' ; 
field. style. fontSize = 'larger'; 
field. style. fontWeight = 'bold'; 

Alors qu'avec with, 9a donne : 

Listing 2-7 Le meme avec un with judicieusement employe 

with (field. style) { 

border = 'lpx solid red'; 
margin = 'lem 0' ; 
backgroundColor = '#fdd'; 
fontSize = 'larger'; 
fontWeight = 'bold' ; 
} 

Pratique, vous ne trouvez pas ? 



Operateurs meconnus 

JavaScript dispose de nombreux operateurs, dont les grands classiques bien sur, mais 
aussi certains moins connus. II gere egalement certains operateurs classiques d'une 
facon particuliere. 

Retour rapide sur les grands classiques 

JavaScript reprend la plupart des operateurs classiques. On retrouve notamment : 

Tableau 2-5 Operateurs classiques egalement presents dans JavaScript 



Categoric 


Operateurs 


Arithmetiques 


+, -, *, /, %, ++, --, - unaire (inversion de signe) 


Affectations 


=, +=, -=, *=, /=, »=, «=, &=, |=, A = 


Bit a bit 


&, 1 , A , ~, «, » 


Relationnels 


==, !=, >, >=, <, <= 


Logiques 


&&, ||, ! 


Textuels 


+ et += pour la concatenation 


Acces aux membres 


obj.propriete et obj["propriete"] (deja evoques plus haut) 
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Mais on a aussi quelques operateurs moins courants, meme s'ils existent dans quel- 
ques autres langages. 

Operateurs plus exotiques 

Par exemple, l'operateur === (sa negation etant !==) represente l'egalite stricte. En 
plus d'etre egaux en valeur, les operandes doivent avoir le meme type. On le trouve 
aussi, par exemple, dans PHP. Ainsi, '3' == 3, mais'3' !== 3. 

L'operateur i n permet de determiner si son operande de gauche est bien une pro- 
priete de l'objet operande de droite. C'est tres pratique pour eviter les cas delicats de 
methodes plus generales. Ainsi, on a l'habitude de tester que l'objet global document 
a bien une methode createTextNode en faisant simplement ceci : 

if (document .createTextNode) 

C'est correct, car si la methode manque, 1' expression vaut undef i ned, equivalent ainsi 
a f al se, et le test echoue. Mais quid d'un test sur une propriete booleenne, ou sim- 
plement pouvant valoir null? Par exemple, considerez le test suivant : 



j] if (someDOMNode. firstChi Id) 



Ce test ne permet pas de savoir si someDOMNode a bien une propriete fi rstChi Id : il 
suffit que someDOMNode soit un element vide pour qu'il ait bien cette propriete, mais 
quelle vaille null, faisant echouer le test. 

L'operateur i n a la rescousse ! 
if ('firstChild' in someDOMNode) 

Notez que l'operande de gauche est une valeur (un nombre, un texte, etc.), qui cor- 
respond au nom de la propriete. 

Comportements particuliers 

En JavaScript, n'importe quelle valeur possede un equivalent booleen, pour pouvoir 
etre utilisee dans le cadre d'une expression de test. La regie est simple : les valeurs 
null, undefined, false, -0, +0, NaN et ' ' (chaine vide) equivalent a false. Le reste 
equivaut a true. 

Si les zeros signes vous etonnent, souvenez-vous que les nombres JavaScript sont des 
nombres flottants conformes au standard IEEE 754 : on gere le zero positif et le zero 
negatif. Quelle difference ? Un zero positif est obtenu, par exemple, en divisant un 
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nombre par une infinite de memes signes, tandis qu'un zero negatif est obtenu en 
divisant un nombre par une infinite de signes opposes. 

C'etait la minute culturelle, parce que franchement, le jour ou vous aurez besoin de 
cette distinction dans vos scripts... 

II est important de savoir qu'il est done possible de tout utiliser dans un tes et avec les 
operateurs logiques. II faut juste bien se souvenir quelles valeurs equivalent a false. 
Heureusement, la liste est intuitive. 

Prise en charge des exceptions 

Depuis sa version 1.4, JavaScript gere les exceptions, ce qui en ameliore considera- 
blement la robustesse. JScript a attendu sa version 5.6 (MSIE 6). 

Rappelons rapidement qu'une exception, e'est une erreur d'execution. Une condition 
exceptionnelle (car il ne devrait pas y avoir d'erreur, pardi !) dans laquelle le pro- 
gramme est soudain plonge. Expliquer dans le detail le bien-fonde des exceptions par 
rapport aux mecanismes plus anciens de signalement et de traitement des erreurs sort 
largement du cadre de ce chapitre. Si le sujet vous interesse, consultez le site suivant : 
http://fr.wikipedia.org/wiki/Systeme_de_gestion_cTexceptions. 



Les types (('exceptions predefinis 

Bien qu'on puisse utiliser absolument toutes les expressions comme representation de 
l'erreur, JavaScript definit tout de meme, depuis la version 1.5, six types d'erreurs 
precis. II s'agit de specialisations de l'objet Error, lequel fournit principalement des 
proprietes name et message. La premiere fournit le nom de l'erreur, e'est-a-dire le 
nom de son type ; la seconde fournit le message passe au constructeur de l'objet. 

Tableau 2-6 Types predefinis d'erreur en JavaScript 1 .5 



Type Description 


Eva! Error 


Probleme a I'execution du code fourni a eval . 


RangeError 


Indique qu'un argument ou une variable avait une valeur hors de I'intervalle 
autorise. 


ReferenceError 


Utilisation d'un identifiant inconnu (faute de frappe, etc.). 


SyntaxError 


Probleme syntaxique a I'analyse du code fourni a eval . 


TypeError 


Indique qu'un argument ou une variable avait un type invalide. Par exemple, 
methode inconnue. 


URIError 


Erreur de syntaxe dans un URI passe a encodeURI ou decodeURI. 


Internal Error 


Erreur de I'interpreteur. Par exemple, recursion infinie detectee ! N'existe pas sur 
certains navigateurs... 
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Parmi ces types, on peut imaginer reutiliser TypeError et surtout RangeError dans 
nos propres scripts. Le reste exprime surtout des situations survenant dans les fonc- 
tions globales. 

Capturer une exception : try/catch 

Lorsque vous souhaitez capturer une exception susceptible de survenir dans un bloc 
de codes, vous devez encadrer ce bloc par un try. ..catch, selon le schema suivant : 

try { 

// code susceptible de lancer 1 'exception 
} catch (e) { 

// traitement de 1 'exception, stockee dans l'objet e 
} 

Le principe, identique au traitement dans les autres langages gerant les exceptions, 
est le suivant : si le code encadre par try et catch ne leve aucune exception, le con- 
tenu du catch est ignore, et 1' execution se poursuit sur la ligne suivant 1' accolade fer- 
mante. En revanche, si une exception survient n'importe ou dans le code encadre, le 
reste de ce code est court-circuite, et le catch est declenche. L'exception est rendue 
accessible au travers de la variable nommee entre les parentheses. Vous pouvez ainsi 
examiner son nom, son message et son type. 

Dans la pratique, il est rare de voir survenir des exceptions issues du systeme, ou du 
navigateur lui-meme. La plupart du temps, vous lancerez les exceptions vous-meme, 
et les rattraperez plus haut dans la pile d'appels. 

Void tout de meme un exemple d'exceptions natives, qui suppose que l'utilisateur a pu 
taper un code JavaScript dans un champ de saisie d'lD jsCode, et nous a demande de 
l'executer (ce qui, hors d'une page d'exemples, constituerait un trou de securite beant !) : 

Listing 2-8 Un exemple de traitement d'exceptions natives 

function evalCodeO { 

var code = document .getElementByldC jsCode') ; 

var errorZone = document .getElementById('error ') .fi rstChild; 

errorZone.nodeValue = ''; 

try { 

var result = eval (code. value) ; 
if (undefined !== result) 

alert('Resultat : ' + result); 
} catch (e) { 

if (e instanceof SyntaxError) 

errorZone.nodeValue = 'Erreur de syntaxe : ' + e. message; 
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} 



else if (' undefined' != typeof Internal Error 
&& e instanceof Internal Error) 

errorZone.nodeValue = 'Erreur interne : ' + e. message; 
else 

errorZone.nodeValue = e.name + ' : ' + e. message; 



code.focusO ; 
} // evalCode 

Observez l'utilisation de l'operateur instanceof, qui permet de determiner si l'objet 
en operande gauche est compatible avec le type en operande droit (s'il est de ce type 
ou d'un type descendant, done). C'est ainsi qu'on distingue entre les differents types 
d'erreurs, en JavaScript. Afin que le code passe sur tous les navigateurs, on verifie 
aussi que le type Internal Error est bien reconnu. 

Vous trouverez l'exemple complet dans l'archive des codes source pour ce livre, dis- 
ponible sur le site des editions Eyrolles. Si vous utilisez Konqueror, vous n'obtiendrez 
que les erreurs de syntaxe : Konqueror utilise une gestion particuliere, a base de 
« rapports d'erreurs », pour les autres cas. 

Void quelques exemples d'affichage : 





Tableau 2-7 Exemples de comportement de notre script 


Code saisi 


Resultat(Firefox1.5) 


5 + 3 


Boite de message « Resultat : 8 » 


x + 3 


ReferenceError : x is not defined 


5. times (3) 






Erreur de syntaxe : missing ; before statement 


(5). times (3) 






TypeError : 5. times is not a function 


function f() 

fQ; 


{ fO; 


} 


Erreur interne : too much recursion 



Voila done de quoi gerer aussi bien les erreurs natives que celles que nous pourrions 
signaler en lancant nous-memes une exception (ce que nous apprendrons a faire plus 
loin). 

Extension : catch multiples et conditionnels 

Les navigateurs Netscape 6+ et Mozilla (Mozilla, Firefox, Camino) proposent une 
extension a cette syntaxe pour JavaScript 1.5, que je signale par souci d'exhaustivite, 
mais qui doit etre utilisee uniquement lorsque Ton possede la maitrise de l'environ- 
nement client (pour un intranet avec des postes standardises, par exemple). 

L' extension permet d'obtenir une syntaxe similaire a celle du try/catch dans la plu- 
part des langages, en ayant plusieurs blocs catch, afin de differencier plus clairement 
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les comportements, en general selon le type de l'exception. Void ce que donnerait 
notre exemple precedent : 

Listing 2-9 La fonction precedente, reformulee en catch multiples 

function evalCodeO { 

var code = document .getElementByldC jsCode') ; 

var errorZone = document .getElementById('error ') .fi rstChild; 

errorZone.nodeValue = ''; 

try { 

var result = eval (code. value) ; 

if (undefined !== result) 

alert('Resultat : ' + result); 
} catch (e if e instanceof SyntaxError) { 

errorZone.nodeValue = 'Erreur de syntaxe : ' + e. message; 
} catch (e if e instanceof Internal Error) { 

errorZone.nodeValue = 'Erreur interne : ' + e. message; 
} catch (e) { 

errorZone.nodeValue = e.name + ' : ' + e. message; 
} 

code. focus () ; 
} // evalCode 

C'est sympathique, mais cela n'ajoute rien d'un point de vue fonctionnel : il s'agit 
juste de sucre syntaxique. Aussi, je vous conseille de vous abstenir pour des pages 
n'ayant pas la certitude d'etre vues sous un navigateur Netscape 6+ ou Mozilla. 

Point important : une clause catch ne peut capturer que les exceptions survenues 
dans le bloc try, pas dans un autre catch ! Celles-ci se propagent normalement. 

Garantir un traitement : finally 

Le try/catch est bien pratique, mais il lui manque une alternative. En effet, imagi- 
nons que nous souhaitions seulement capturer une partie des exceptions possibles 
(voire aucune), mais garantir qu'un traitement donne soit execute en fin de code dan- 
gereux. 

Les exemples ne manquent pas, car ce besoin apparait a partir du moment ou on 
alloue une ressource temporairement : fichier, socket, memoire, etc. On souhaite 
l'ouvrir ou l'allouer, la manipuler, et assurer sa fermeture ou liberation, qu'on ait ren- 
contre une erreur ou non. 

Ce besoin frequent est la raison d'etre de la clause finally. Cette clause peut etre 
ajoutee au try, apres tous les eventuels catch. II ne peut y en avoir qu'une. Un try a 
done au moins un catch ou un fi nally. Le contenu de cette clause est execute quoi 
qu'il arrive. 
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On peut imaginer un code du genre : 

var res = new HeavyResource (args) ; 
try { 

// Code manipulant res, qui a potentiellement des erreurs 
} finally { 

delete res; 
} 

Qu'il y ait des erreurs ou pas, on libere la ressource. C'est tres pratique (et cela 
manque un peu a C++, par exemple, qui doit recourir a des astuces de smart pointers 
pour obtenir le meme resultat). 



Lancer sa propre exception : throw 

Tout l'interet du mecanisme des exceptions est de nous permettre de signaler une 
erreur a un endroit du code qui nest pas a meme de la resoudre ; plus haut dans la 
pile d'appels, peut-etre un endroit du code aura-t-il les informations necessaires pour 
apporter un traitement satisfaisant, ce qu'il ne manquera pas de faire a l'aide d'un 
try/catch prevu pour capturer notre erreur. 

Seulement voila, comment la lance-t-on, notre erreur ? A l'aide de l'instruction 
throw. Celle-ci prend un argument unique, qui est l'objet representant votre erreur. II 
peut s'agir de n'importe quel objet, ce qui en JavaScript signifie n'importe quelle 
valeur : 42, 'Dommage Eliane ! ', un objet a vous ou une instance d'erreur predefinie 
feront tout autant 1' affaire. 

Evidemment, si vous souhaitez pouvoir apporter un traitement generique des erreurs 
(pour maintenir un journal d'erreurs par exemple), il vaut mieux fournir a chaque fois 
des objets compatibles avec Error : des instances soit d'erreurs predefinies (voir 
tableau 2-6), soit d'objets qui vous appartiennent et qui sont exterieurement compa- 
tibles avec Error (ils ont done des proprietes name et message). Void un exemple : 

Listing 2-10 Exemples de lancements d'exceptions 

function CustomError(message, info) { 

this. name = 'CustomError ' ; 

this. message = message; 

this. customlnfo = info; 
} // CustomError 

try { 

// Code qui s' execute 

throw new CustomErrorC'souci !', 42); 

// Code court-ci rcuite 
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} catch (e) { 

if (e instanceof CustomError) 

alert(e. message + ' / ' + e.customlnfo) ; 
else 

throw e; 
} 

Comme on utilise ici une fonction constructeur, l'operateur instanceof fonctionne 
correctement. 

Vous voyez aussi une utilisation courante de throw : la repropagation d'une exception 
depuis un catch. En effet, un catch « tue » l'exception, qui ne se propage plus : elle 
est morte, pour ainsi dire. II est toutefois possible de la relancer, puisque throw lance 
son argument comme exception. Une clause catch peut done simplement 
« intercepter » une erreur, par exemple pour la consigner dans un journal d'erreurs. 



Ameliorer les objets existants 

JavaScript est un langage a prototype (par opposition a un langage base sur les classes 
et sous-classes pour realiser l'heritage). Tout objet JavaScript est dote d'une propriete 
prototype, qui represente le modele sur lequel l'objet en question se base. Un objet 
dispose automatiquement de toutes les proprietes de son prototype. JavaScript 
permet de modifier le prototype d'un objet a n'importe quel moment, et d'ajouter ou 
d'enlever des proprietes a tout instant. 



Un peu de theorie sur les langages a prototypes 

C'est une notion tees deroutante pour les personnes habituees a un systeme de classes 
et d'instances, comme Delphi, C++, Java ou C#. II est inutile d'en maitriser tous les 
details pour ecrire la tees vaste majorite des scripts, mais cela aide a comprendre le 
code de bibliotheques riches, comme celui de Prototype (justement). 

Void un petit resume des principales differences, pour les curieux : 
Tableau 2-8 Differences entre des langages a classes et a prototypes 



Dans un langage a classes... 

On distingue les classes et leurs instances : les objets. 

On definit une classe avec une definition, on I'instancie 
avec une methode constructeur. 

On obtient une hierarchie en referencant la classe mere 
dans la definition de la classe f i lie. 



L'heritage suit la chafne de classes. 



Dans un langage a prototypes- 
Tout est une instance. 

On definit et on instancie des objets a I'aide d'une fonction 
constructeur (voir CustomError dans le listing 2-10). 

On obtient une hierarchie en definissant un objet pere 
comme prototype de la fonction constructeur f i I le. 

L'heritage suit la chame de prototypes. 
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Tableau 2-8 Differences entre des langages a classes et a prototypes (suite) 

Dans un langage a classes... Dans un langage a prototypes... 

Les definitions d'une classe et de ses classes ancetres Les fonctions constructeurs definissent un jeu initial de 

fournissent I'ensemble complet et definitif des proprietes proprietes. On peut ajouter ou oter des proprietes a tout 
de toutes les instances de la classe. moment pour un objet individuel, ou pour tous les objets 

bases sur un meme prototype. 



JavaScript est done particulierement flexible quant aux definitions des objets, ce qui 
permet d'obtenir certains idiomes tres pratiques, comme les objets anonymes, ou la 
simulation d'heritage statique par recopie des proprietes d'un prototype dans un 
autre (au coeur de la bibliotheque Prototype actuelle). 

Mais si tout ceci vous plonge dans la plus extreme confusion, soyez sans crainte : 
vous n'avez pas besoin de trouver le tableau 2-8 d'une limpidite cristalline pour com- 
prendre ce qui va suivre. 

Retenez simplement qu'en modifiant les proprietes (champs ou methodes) du proto- 
type d'une classe (techniquement, il faudrait ecrire d'une fonction constructeur, mais 
quand je dis classe, avouez que cela vous parait plus clair, non ?), on affecte toutes les 
instances de cette classe (tous les objets crees par cette fonction constructeur). Et il 
faut noter que Ton affecte aussi ceux crees avant la modification ! En effet, ils refe- 
rencent tous le meme prototype. 

Si vous voulez reellement reflechir en termes classiques (e'est le cas de le dire), vous 
pouvez voir cela comme des instances qui feraient toutes de la composition/delega- 
tion sur un singleton. 

Mise en pratique 

Pour ce qui nous interesse ici, cette notion nous permet d'augmenter les possibilites 
d'objets predefinis. Vous venez peut-etre de Java, et etes tout depite de ne trouver 
dans String ni startsWith ni endsWith, sans parler de trim ? II vous manque des 
methodes dans Array (ah bon ? Vous etes sur d'avoir bien regarde, parce qu'il y en a 
un paquet...) ? Qu'a cela ne tienne, rajoutez-les ! 

Nous allons voir ensemble deux exemples. Nous allons d'abord etendre Stri ng, en lui 
ajoutant les trois methodes que nous venons d'evoquer (et meme une quatrieme, tant 
qu'a faire !). Ensuite, nous ajouterons a Array une des rares fonctionnalites qui lui 
manquent vraiment. 

Etendre ses Strings 

Voici comment etendre les possibilites de n'importe quelle valeur representee par 
JavaScript a l'aide d'un objet Stri ng (y compris tout ce qui vient du DOM !). 
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Listing 2-11 Extensions sympathiques de String par son prototype 

String. prototype. endsWith = function (suffix) { 

return this. length - suffix. length == this. lastlndexOf (suffix) ; 

}; 

Stri ng. prototype. isBlank = function() { 
return null != this .match(/A\s*$/) ; 

}; 

Stri ng. prototype. startsWith = function (prefix) { 
return == this .indexOf (prefix) ; 

}; 

String. prototype. trim = function() { 

return this . replace(/A\s+|\s+$/g, ''); 

}; 

Toutes les chaines de caracteres, peu importe leur provenance et leur date de crea- 
tion, disposent maintenant de quatre fonctions supplementaires. Nous verrons un 
peu plus loin un exemple d'execution. 

Array et les injections 

L'objet Array de JavaScript est sans doute l'un des plus meconnus. La plupart des 
gens se bornent a utiliser ses proprietes d'index (data [0] , etc.) et sa propriete 1 ength, 
pour boucler sur les elements par exemple. Pourtant, en tant qu'objet, il dispose de 
nombreuses methodes tees pratiques, qui nous facilitent considerablement 1 'ecriture 
du code. 

Pvien que pour vous donner une idee, voici leur liste a partir de JavaScript 1.6, sans 
entrer dans les details: concat, every, filter, forEach, indexOf (si!), join, 
lastlndexOf, map, pop, push, reverse, shift, slice, some, sort, splice, toSource, 
toString, unshift et valueOf. Je suis pret a parier qu'au moins certaines vous sont 
inconnues, en particulier les methodes d'iteration : every, filter, forEach, map et 
some. II faut avouer queries sont apparues avec JavaScript 1.6, et MSIE ne supporte 
deja pas tout le standard 1.5... 

Toutefois, meme sur un navigateur prenant en charge toutes ces methodes (les navi- 
gateurs Mozilla typiquement), il manque une fonction courante des objets 
enumerables : l'injection. 

Pour simplifier, un enumerable est une sequence d'elements, sur laquelle il est pos- 
sible d'iterer du premier element jusqu'au dernier. Une injection sur un enumerable 
consiste a definir une valeur, dite accumulateur, avec une valeur initiale, et qui va evo- 
luer en lui appliquant une fonction donnee pour chaque valeur de l'enumerable. 
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Par exemple, supposons un accumulateur de valeur initiale zero, et une fonction 
d'injection qui, en recevant 1' accumulateur et 1' element courant de l'iteration, renvoie 
la somme des deux. En injectant cette fonction sur un enumerable de nombres, on 
obtient la somme. Un accumulateur demarrant a 1 (un) et une fonction renvoyant le 
produit, retournent le produit interne de l'enumeration, etc. 

C'est un mecanisme tres utile, surtout si on ajoute une astuce : faute de valeur expli- 
cite pour la valeur initiale de l'accumulateur, on prend le premier element de Innu- 
merable, et on itere a partir du second. 

Void le code JavaScript qui ajoute cette possibilite aux tableaux, en definissant tant 
qua faire deux utilisations communes de rinjection : 

Listing 2-12 Ajout de I'injection aux tableaux, et de deux utilisations courantes 

Array. prototype. inject = function(fx, ace) { 
if (0 == this. length) 

return ace; 
var start = undefined === ace ? 1 : 0; 
if (undefined === ace) 

ace = this[0] ; 
for (var index = start; index < this. length; ++index) 

ace = fx(acc, this [index]) ; 
return ace; 
} // inject 

Array. prototype. sum = function() { 

return this .inject(function(acc, num) { 
return ace + num; 

}); 

} // sum 

Array. prototype. average = function() { 

return this.sumO / this. length; 
} // average 

Remarquez que le cas du tableau vide ne conduit a aucune erreur dans average : sum 
renverra undefined, length renverra zero, et undefined / donne NaN, ce qui est 
plutot bien pour la moyenne d'un tableau vide, qui n'a done aucun element pour pro- 
duire une moyenne valide. 

Nous venons de voir l'aspect theorique, mais que cela donne-t-il en pratique ? Dans 
l'archive des codes source pour ce livre, disponible sur le site des editions Eyrolles, 
vous trouverez un exemple complet, dont le resultat est presente a la figure 2-1. 
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Figure 2-1 

Execution d'exemples utilisant 
ces extensions 
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Plutot chouette, vous ne trouvez pas ? Les possibilites sont infmies... Enfin, pas tout 
a fait infinies quand mime. Autant dans Mozilla, Firefox et Camino, tout objet a un 
prototype, autant d'autres navigateurs limitent cet aspect aux objets issus de fonc- 
tions constructeur. Ainsi, les objets du « DOM navigateur » (window, navigator, 
etc.) et les objets du DOM standard n'ont pas forcement un prototype. Le code sui- 
vant ne fonctionnera pas partout, helas ! 

Element. prototype. mylnnerText = functionO { 

} 



Arguments des fonctions 

JavaScript fait partie de ces langages qui n' exigent pas une concordance entre le 
nombre de parametres et celui d'arguments. Qy'une fonction declare ou non des 
parametres (en fournissant leurs noms entre les parentheses), il est possible de lui 
passer des arguments. Declarer des parametres ne sert qua donner un nom aux pre- 
miers arguments transmis. On peut en passer plus, moins, voire aucun. 

Tout parametre declare, pour lequel aucun argument n'est transmis, a la valeur spe- 
ciale undef i ned. II existe deux moyens de tester cet etat. Le plus long, et pourtant le 
plus repandu : 



|j ('undefined' == typeof paramName) 
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Le plus court, qui est d'aileurs le plus performant aussi, est moins repandu (par 
manque d'information vraisemblablement) : 

(undefined === paramName) 

Quant aux arguments passes en surplus, il faut y acceder d'une facon plus generique. 
En effet, chaque fonction a automatiquement une variable locale nommee 
arguments. Cette variable nest pas a proprement parler un tableau (ce n'est pas tou- 
jours une instance de Array), mais elle se comporte comme tel, en fournissant une 
propriete length et des proprietes d'index, qui permettent done la notation 
arguments [numero] , en debutant bien entendu a zero. 

Void par exemple une fonction qui affiche l'ensemble de ses arguments. Dans la 
mesure ou arguments n'est pas forcement un Array, on va creer le texte a afficher 
manuellement puisqu'on n'a pas de garantie d'une methode join. On verra toutefois 
a la prochaine section comment pouvoir utiliser joi n malgre cette incertitude. 

Listing 2-13 Une fonction affichant la liste de ses arguments 

function showArgsO { 

var msg = ' ' ; 

for (var index = 0; index < arguments. length; ++index) 
msg += arguments [index] + '\n'; 

alert(msg) ; 
} // showArgs 

showArgs( ' hello ' , 1, 2, 3.14); 

L'affichage obtenu donne ceci (la page d'exemple, fournie dans l'archive des codes 
source, illustre aussi la section suivante) : 



Figure 2-2 

Notre fonction affiche bien 
ses arguments ! 
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Cette variable arguments permet de realiser facilement des fonctions a parametres 
variables. Pour les habitues de C ou Java 5 : c'est comme la notation . . . de ces lan- 
gages. Void par exemple une fonction qui prend un facteur en argument, puis un 
nombre quelconque de valeurs, et renvoie le tableau des produits. 

Listing 2-14 Un exemple de fonction a parametres variables 

function multiply (factor) { 

var result = [] ; 

for (var index = 1; index < arguments. length; ++index) 
result. push(factor * arguments[index]) ; 

return result; 
} // multiply 



Le binding des fonctions : mais qui est « this » ? 

Void Fun des sujets les plus delicats, et pourtant parmi les plus critiques, de JavaScript. 
Vous connaissez certainement le mot reserve this. II s'agit d'une reference sur l'objet 
courant. Seulement voila : quel est done l'objet courant ? 

Les regies ne sont pas tres compliquees, mais on a vite fait de les oublier en pleine 
ecriture de code, ce qui peut avoir des des consequences desastreuses en termes de 
temps passe a deboguer... 

• Au niveau global (code hors fonction, fonction globale), this represente l'objet 
window courant. 

• Dans une fonction declaree normalement et appelee directement, thi s represente 
l'objet sur lequel on a appele la methode. 

• Dans une fonction anonyme, thi s a le meme sens qu'immediatement hors de la fonc- 
tion anonyme. Si la fonction anonyme est affectee a une propriete d'un prototype, 
thi s designe alors l'objet, fonde sur ce prototype, sur lequel on appelle la methode. 

La premiere regie est assez intuitive. Dans la seconde, il faut bien prendre garde aux 
contraintes : declaree normalement elle implique l'utilisation de l'instruction 
function avec un nom de fonction, tandis que appelee directement elle signifie qu'on 
fait suivre le nom de la fonction par des parentheses, au lieu de passer une reference a 
l'objet fonction pour execution par un tiers. 

Je suis bien conscient que pour les lecteurs, non habitues a fouiller dans les semanti- 
ques d'appel et d'identite, ces quelques phrases sement la confusion ! Essayons d'y 
voir plus clair avec quelques exemples. 
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Void deja un code sans surprise : 

Listing 2-15 Exemples oil this represente I'objet wi ndow 

function f() { 

this.alert('Oui , this est bien window !'); 
} 
alert (this. navigator. userAgent) ; 

fO; 

Ce code fonctionne, car aussi bien dans la fonction globale f qu'au niveau superieur, 
this represente I'objet window, proprietaire entre autres de la methode alert et de 
I'objet navigator. D'ailleurs, tout code execute au niveau global est execute dans ce 
contexte, ce qui explique qu'on puisse appeler, par exemple, alert, sans le faire pre- 
ceder de « wi ndow . » ou « thi s . ». 

Voyons a present le cas d'une methode pour un objet donne, ici un objet anonyme : 
Listing 2-16 Le sens normal de thi s dans les methodes d'un objet 

var myObj = { 

name: 'Mon objet a moi ' , 

method: functionO { 

// Affiche le champ, car on est dans une methode 
alert(this.name) ; 

} 
} 

myObj . method () ; 

// Affichera autre chose, car ici this est I'objet window 
alert(this.name) ; 

Tout ceci semble parfait, mais que se passe-t-il dans le code suivant ? 
Listing 2-17 Nous voila trahis par le binding ! 



V2 


tr myObj = 


- { 






name: 


Mon objet a 


moi ' , 




method 


functionO 


{ 




alert(this.name) ; 




} 






} 








function f(fx) { 






fxO; 






} 









f (myObj .method) ; 
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Au premier abord, ce code semble devoir donner exactement le meme resultat que le 
precedent : on passe notre methode a f , qui l'appelle. Et pourtant, on obtient un affi- 
chage similaire (normalement, un texte vide) a l'execution de alert(this.name) au 
niveau global, c'est-a-dire au niveau de f ou de la ligne finale. Que s'est-il passe ? 

II s'agit la d'un croque-mitaine frequent chez les developpeurs web, car la notion de 
binding, qui joue ici a plein, est rarement abordee par les ouvrages et didacticiels. 
Void la cle du probleme : lorsqu'on passe une methode comme argument, on perd 
son binding. Plus exactement, elle prendra le binding de sa fonction appelante. 

Trafalgar ! Que pouvons-nous done faire ? Recourir aux methodes meconnues des 
fonctions, pardi ! 

Voila une locution qu'on ne risque pas de croiser tous les jours : « les methodes des 
fonctions ». Souvenez-vous qu'en JavaScript, les fonctions sont des objets elles aussi : 
ce sont des instances de Function. Or, le prototype de Function prevoit deux 
methodes specialement concues pour fournir un binding explicite a la fonction sur 
laquelle on l'appelle. 

Ces deux methodes s'appellent call et apply, et ne different que par la facon de 
passer les arguments a la fonction : cal 1 exige de les preciser un par un (ce qui sup- 
pose qu'on les connait tous), tandis que apply utilise un tableau (ce qui permet des 
traitements generiques, arguments se comportant comme un tableau). 

Pour illustrer ce point, nous allons realiser trois petits exemples. Le premier corrige le 
tir sur notre fragment de code precedent, pour lui redonner le comportement attendu : 

Listing 2-18 Notre dernier exemple avec le bon binding 

var myObj = { 

name: 'Mon objet a moi ' , 

method: functionO { 
alert(this.name) ; 

} 
} 

function f(fx, obj) { 
fx. call (ob j) ; 

} 

f(myObj .method, myObj); 

On passe ici le contexte (le binding) voulu a f, qui l'utilise comme premier (et 
unique) argument a fx.call (c'est-a-dire a myObj .method. call). Ce premier argu- 
ment indique le contexte a utiliser par la methode quand elle interprete this. 
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On peut meme appeler cal 1 ou appl y sur la fonction recuperee depuis le prototype. 
Ainsi, reprenons notre exemple de fonction affichant la liste de ses arguments, quels 
qu'ils soient. J'avais signale tout a l'heure que comme arguments n'etait pas un Array, 
on ne pouvait utiliser join dessus pour se simplifier la tache. En effet, considerez le 
fragment suivant : 

alert (arguments . join('\n')) ; 

II ne produirait qu'une erreur indiquant que joi n est introuvable. Or, il se trouve que 
join fait partie des methodes dites « generiques » de Array, en ce sens qu'elles ont 
juste besoin que this ait une propriete length et des proprietes d'index, c'est-a-dire 
qu'on doit pouvoir faire this[0], par exemple. La methode join ne modifie en rien 
l'objet sur lequel on l'invoque. Puisque arguments remplit ce contrat, il nous suffit 
d'invoquer join dans le contexte de arguments. N'ayant pas d'objet Array sous la 
main, on peut recuperer la methode via le prototype : 

Listing 2-19 Une version plus elegante de notre fonction showArgs 

function showArgs () { 

alert(Array. prototype. join. call (arguments, '\n')) ; 

} // showArgs 

Ici encore, cal 1 est approprie, car on connait le detail des arguments a passer a joi n : 
simplement ' \n ' . Lorsqu'on souhaite simplement passer les arguments d'origine par 
exemple, mais avec un contexte explicite, on preferera utiliser apply avec le 
arguments d'origine, qu'il soit modifie ou non. 

Justement, pour revenir a notre exemple de methode passee en argument, notre pre- 
miere solution possede le comportement voulu, mais c'est un peu laborieux : en plus 
de passer la methode, on doit passer le contexte, et ceci a chaque descente dans une 
fonction, afin qu'au moment de rutilisation effective de la methode, on puisse faire 
un appel a cal 1 . Ce n'est pas pratique dans la majorite des cas. Comment pourrait- 
on passer une methode en argument, sans perdre son contexte ? 

Cette preoccupation est au cceur de 1' extension bi nd presente dans la bibliotheque 
Prototype, qui a souvent besoin d'une telle possibilite. Elle n'utilise rien que nous 
n'ayons vu jusqu'a present. A l'aide simplement d'une fonction anonyme et de apply, 
on peut obtenir ce resultat. 
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Listing 2-20 Binding durable d'une methode pour passage comme argument 

var myObj = { 

name: 'Mon objet a moi ' , 

method: function(extraArg) { 

alertCthi s.name + '\n' + extraArg) ; 

} 
} 

Function. prototype. bind = function(obj) { 

var fx = this; 

return functionO { 

return fx.applyCobj , arguments); 

} 
} 

function f(fx) { 
fx(42); 

} 

f (myObj . method. bind(myObj)) ; 

Ici, un argument supplemental a method permet de voir qu'on ne perd pas les argu- 
ments au passage. L'appel final affichera bien « Mon objet a moi », et a la ligne, « 42 ». 
L'expression : methode. bind(objetvoulu) renvoie une fonction anonyme, laquelle, 
lorsqu'on l'appelle, transmet tous ses arguments a la methode d'origine, invoquee dans 
le contexte de objetvoulu, et renvoie le resultat. C'est une simple delegation. 

Seule petite subtilite dans bi nd : la sauvegarde de thi s dans une variable locale avant 
de creer la fonction anonyme a renvoyer : dans celle-ci, this designerait le this actif 
au moment de la definition de bi nd, soit 1' objet wi ndow. Pas trop le tournis ? 

Encore une fois, des exemples interactifs sont disponibles dans 1' archive des codes 
source pour cet ouvrage, qui vous permettront de tester par vous-meme les divers cas 
de figures evoques. 

Idiomes interessants 

On ne programme bien dans un langage que lorsqu'on commence a rediger du code 
idiomatique, c'est-a-dire conforme aux usages du langage. A vouloir ecrire du Java 
comme on faisait du C++, on ne produit que du mauvais Java. A ecrire du Ruby sans se 
defaire de ses habitudes (qu'elles viennent de Perl, Java, C# ou Python), on ecrit du 
mauvais Ruby. II faut prendre le nouveau langage a bras le corps, et epouser ses concepts, 
ses formes et ses usages, pour produire quelque chose d'efficace, d'elegant et d'expressif 
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JavaScript a traditionnellement ete traite de maniere assez superficielle, comme un 
langage de seconde zone dont les utilisations etaient trap simples pour meriter des 
idiomes de qualite. Et pourtant, dans les bibliotheques qui tirent vraiment partie de 
la puissance du langage, on trouve de nombreuses perles... Void quelques bonnes 
idees extraites du code de bibliotheques comme Prototype ou script.aculo.us. 

Initialisation et valeur par defaut avec | 

Commencons par voir comment fournir une valeur par defaut a un argument. On Fa 
vu, dans la mesure ou il est parfaitement possible d'invoquer une fonction avec moins 
d'arguments quelle n'a de parametres declares, certains parametres vont se retrouver 
sans valeur. 

Si ces parametres ont ne serait-ce qu'une valeur valide qui soit compatible avec f al se 
(pour rappel, cela signifie undefined, false, -0, +0, NaN ou la chaine de caracteres 
vide, ' '), alors on n'a d'autre choix que de recourir a un test traditionnel, un rien 
verbeux : 

if (undefined === arg) 

arg = expressionDeLaValeurParDefaut; 

En revanche, quand l'argument n'a comme valeurs valides que des expressions non 
compatibles avec false (un nombre positif, un element du DOM ou son ID, etc.), 
alors on peut tirer parti de cette compatibilite en utilisant la semantique de court- 
circuit de l'operateur logique I I : 

arg = arg | | expressionDeLaValeurParDefaut 

Cet operateur fonctionne comme en Java, C, C++, C# ou Ruby, pour ne citer 
qu'eux : si son operande gauche est equivalent a true, il le retourne, sinon il retourne 
celui de droite. Ici, si notre argument a une valeur valide, on la concerve, sinon on 
prend celle par defaut. 

Si on n'utilise arg seulement a un endroit de la fonction, il est meme possible de se 
passer de le redefinir, et d'employer l'expression directement : 

function doSomething(requi redArg, arg) { 

doSubTask(42 , arg || expressionDeLaValeurParDefaut, 'blah'); 

} 
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Selectionner une propriete (done une methode) sur condition 

Lorsqu'on souhaite choisir parmi deux proprietes d'un objet en fonction d'une con- 
dition simple, on a souvent recours, par souci de simplicite, a l'operateur ternaire ? : , 
comme ceci : 

var value = someConch'tion ? obj.propA : obj.propB; 

Dans tous les langages ayant des fonctions de premier ordre, les fonctions sont, par 
definition, manipulables comme des valeurs. On peut done aussi s'en servir pour 
choisir une methode : 

var fx = someConch'tion ? obj .methodA : obj .methodB; 
fx(argl, arg2) ; 

En JavaScript, on peut encore raccourcir cela en profitant du fait que l'operateur [] 
est, comme on l'a vu, equivalent a l'operateur de selection de membre ( . ), base sur le 
nom de la propriete. Par exemple, imaginons un objet ayant deux methodes d'invo- 
cation identiques (elles prennent toutes les deux les memes arguments), et qu'on sou- 
haite appeler l'une ou l'autre suivant une condition. On peut simplement ecrire : 

obj [someCondition ? 'methodA' : 'methodB' ] (argl, arg2) ; 

Exemple concret dans Prototype, tire de Element, toggle : 
Element [Element .visible (element) ? 'hide' : 'show'] (element) ; 

Encore mieux : appeler une methode dont le nom est stocke, dynamiquement, dans 
une variable, mais dont on connait les parametres. La aussi, void un exemple concret 
tire de Prototype (Form. Element.getValue) : 

var parameter = Form. Element .Serial izers[method] (element) ; 
Personnellement, je trouve cela franchement mignon... 

Tester I'absence d'une propriete dans un objet 

Nous avons deja evoque ce point plus haut avec l'operateur i n. Tester qu'un objet ne 
dispose pas d'une propriete (ce qui inclut les methodes) ne peut pas toujours se 
resumer a ceci : 



if (obj .propName) 



Dormer vie aux pages 

Premiere partie 

II suffit que l'objet dispose d'une propriete ainsi nommee, dont la valeur est equiva- 
lente a f al se, pour que le test ne serve a rien. Preferez l'operateur i n, qui sert expres- 
sement a ceci : 

I if ('propName' in obj) 

Attention a bien encadrer le nom de la propriete par des guillemets simples ou 
doubles : l'operateur gauche de i n est un nom, done un texte. 

Fonctions anonymes : jamais new Function ! 

Nous avons deja largement eu l'occasion de faire appel aux fonctions anonymes dans 
ce chapitre, par exemple dans la section sur 1' extension des objets par leur prototype, 
ou sur le binding. Je souhaite juste preciser ici qu'il vaut mieux vous abstenir d'utiliser 
new Function dans ce genre de cas, et d'ailleurs, dans tous les cas. 

Une fonction anonyme ainsi creee n'a pas le meme binding pour thi s : au lieu d'uti- 
liser le thi s du contexte environnant, elle utilise le thi s global, done l'objet wi ndow. 
C'est tres deroutant. Evitez cette syntaxe, preferez l'operateur function qu'on utilise 
habituellement. Et c'est surtout plus court a ecrire ! 

Objets anonymes comme hashes d'options 

Nous avons eu l'occasion de voir des objets anonymes dans nos exemples de binding. 
Un objet anonyme est constitue d'une serie de proprietes separees par des virgules, le 
tout entre accolades. Chaque propriete (ce qui, je ne le repeterai jamais assez, inclut les 
methodes) est definie par son nom, un deux-points ( : ) et sa valeur. Void un exemple : 

Listing 2-21 Un exemple d'objet anonyme 

var author = { 

name : ' Ch ri stophe ' , 

age: 28, 

publisher: 'Eyrolles', 

greet: function(who) { 

alertC Bonjour ' + who + '.'); 
}, 

nickname: 'TDD' 
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On peut acceder aux proprieties avec l'operateur point (.) Si le nom de la propriete 
enfreintla syntaxe JavaScript (par exemple, s'il s'agit d'un nombre), on utilisera l'ope- 
rateur [] . Un objet anonyme se comporte finalement comme un tableau associatif de 
valeurs, ce qu'on appelle communement un hash. 

Cette similitude est tres pratique lorsqu'on souhaite definir une fonction acceptant 
un certain nombre d'options, tout en evitant les signatures a rallonge. Une option, 
par definition, est optionnelle. Representer une dizaine d'options sous forme d'argu- 
ments exigerait de passer toutes les options dans le bon ordre, etc. Ce qui n'est abso- 
lument pas agreable. 

C'est pourquoi on accepte souvent les options sous forme d'un objet anonyme, dont 
les proprietes sont nominees d'apres les options. Imaginons une fonction avec deux 
arguments obligatoires, offrant trois options optA, optB et optC ayant pour valeurs 
par defaut respectives 42, la chaine vide (' ') et false. On suppose que pour optA, 
zero n'est pas une valeur valide. Void comment realiser cela facilement : 

Listing 2-22 Une fonction avec des options passees comme un hash 

function myFunc(argl, arg2, options) { 

// Dans le cas ou on ne passe aucune option ! 

options = options | | {} 

options. optA = options. optA || 42; 

options. optB = options. optB || ''; 

options. optC = options. optC || false; 

// Code de la fonction 
} // myFunc 

Evidemment, le code serait encore plus simple si JavaScript proposait un operateur 
d'affectation combinee I I =, mais ce n'est pas le cas. Pour appeler notre fonction, on 
dispose alors d'une syntaxe plutot agreable, qui n'est pas sans rappeler les arguments 
nommes. Void quelques exemples d'appel : 

myFunc(l, 2); 

myFunc(3, 4, { optB: 'Douglas Adams' }) ; 

myFunc(5, 6, { optA: 21, optC: true }) ; 

Simuler des espaces de noms 

Lorsqu'on developpe une grosse base de code, il est frequent de vouloir la structurer. 
Suivant les langages, on dispose de mecanismes appeles paquets, modules, espaces de 
noms... En JavaScript, il n'y a rien (ce qui changera en JavaScript 2, soit dit en passant). 



Dormer vie aux pages 

Premiere partie 



On peut toutefois simuler les espaces de noms en creant des objets anonymes ne 
jouant qu'un role de module. C'est tout simple : 

var Ajax = {} 
Ajax.Base = { 

// Definition de l'objet 
} 
Ajax.Updater = { 

// Definition de l'objet 
} 
// etc. 



« Unobstrusive JavaScript » : bien associer code JS et 
page web 

II existe de multiples manieres de faire en sorte que du code JavaScript soit execute 
dans une page. Du code peut s'executer au chargement du script (qui se produit bien 
avant que la page ne soit completement chargee), par exemple pour initialiser une 
bibliotheque, ou en reponse a des evenements. 

Lorsqu'il s'agit d'associer du JavaScript a des evenements, il est imperatif que cela ne 
soit pas fait par le HTML. On ne met pas de JavaScript dans le fichier HTML pour 
les memes raisons qu'on n'y met pas de CSS : 

1 Cela alourdit chaque page, et fait obstacle aux strategies de cache des proxies et 
des navigateurs. 

2 Cela constitue une intrusion du comportement (ou pour les CSS, de l'aspect) 
dans le contenu. 

3 Les possibilites offertes par les attributs HTML sont beaucoup moins riches que cel- 
les offertes par le DOM pour l'association de fonctions JavaScript a des evenements. 

On evitera done tout script integre, du style de ceci : 

<script type="text/javascript"> 

// du code ici 

</script> 
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On evitera aussi tout attribut HTML evenementiel, du style <body on"load=" . . . ">. 
Le seul moyen acceptable de lier du JavaScript a une page consiste a placer ce Java- 
Script dans un fichier (generalement d'extension . js), et a charger ce fichier depuis 
la section head du HTML, comme ceci : 

<head> 

<scri pt type="text/ javascri pt" s rc="chemi n/nom . j s"x/scri pt> 
</head> 

Au passage, un point important sur l'ancienne syntaxe utilisee pour preciser le lan- 
gage du script : 



I <script language=" javascript' 



Elle est depreciee depuis HTML 4.01, done depuis 1999, ce qui remonte deja a plu- 
sieurs annees. On utilise desormais 1'attribut type avec le type MIME du langage, 
generalement text/javascript. 

Idealement, une page doit fonctionner sans aucun JavaScript. Les scripts doivent 
ajouter du confort, de la facilite, mais ne doivent pas constituer une condition sine 
qua non pour le fonctionnement des pages. Cela irait a l'encontre de l'accessibilite, et 
done serait susceptible de gener de tees larges categories d'utilisateurs. 

Parce que la gestion portable, efficace et discrete (unobtrusive) des evenements, et 
done leur association a du code JavaScript, repose sur le DOM, vous verrez le detail 
de ces possibilites au chapitre suivant, dans la section « Repondre aux evenements ». 
C'est aussi la que vous trouverez un traitement plus detaille des relations entre Java- 
Script et accessibilite. 

Je signale toutefois un cas ou il est envisageable d'avoir une source XHTML avec un 
fragment de JavaScript a l'interieur : la recuperation d'un fragment XHTML par une 
requete Ajax. En effet, la couche serveur peut vouloir renvoyer aussi bien un contenu 
qu'une serie d'operations a effectuer cote client. Nous verrons des exemples de cela 
au chapitre 6, avec Ajax. Update r et son option eval Scripts. 

On peut parfois s'interroger sur le moment d'execution d'un fragment de script : au 
moment de son chargement, ou une fois le chargement de la page termine ? Vous 
trouverez un traitement detaille de cette question au chapitre 3, a la section Ne 

scrip ter qu'apres que le DOM voulu est constrult. 



Donner vie aux pages 

Premiere partie 



Astuces pour I'ecriture du code 



En JavaScript, comme dans beaucoup de langages, on a interet a prendre quelques petites 
habitudes dans la redaction de notre code source afin d'en ameliorer la lisibilite et d'eviter 
certains pieges classiques. Vbici quelques bonnes habitudes que je vous conseille. 

Dejouer les pieges classiques 

Connaissez-vous les termes lvalue et rvalue ? lis designent les deux operandes d'une 
affectation : celui de gauche, qui constitue done generalement une variable a laquelle 
on peut affecter une valeur, par exemple index ou items [3] . nodeValue ; et celui de 
droite, qui constitue la valeur. Ce dernier est le plus souvent une expression ne cons- 
tituant pas une variable, par exemple 42, 3 * 7 ou 'hello' + name. 

Un piege frequent dans de nombreux langages, dont JavaScript, consiste a faire une 
faute de frappe lors d'une comparaison de type ==. On oublie un signe egal, et on 
obtient =, l'affectation. Au lieu de ceci : 

if ( X == 42) 

on a alors cela : 

if (x = 42) 

Un tel code, qui est tres suspect, ne declenche qu'un avertissement en JavaScript. De tels 
avertissements ne sont pas immediatement visibles sur la plupart des navigateurs. Meme 
pour un developpeur web equipe d'extensions dediees, comme la Web Developer Toolbar 
de Chris Pederick, ou Firebug de Joe Hewitt, un avertissement cause seulement l'appari- 
tion d'une petite icone de panneau triangulaire jaune dans un recoin de l'interface : on ne 
s'en rend pas forcement compte. 

Ce code affecte 42 a x, et renvoie x, qui vaut done 42, ce qui est equivalent a true, et 
fait passer la condition. Avec une valeur fixe comme ceci, il est clair que e'est une 
erreur : si on sait qu'on y met 42, on sait que la condition sera toujours vraie, on n'aurait 
done pas mis de i f . 

Pour eviter ce genre de problemes, je vous recommande de toujours placer les rvalues 
a gauche dans une comparaison ==. Prenons le code valide suivant : 

| if (42 == x) 

Si vous oubliez par megarde un signe egal, le code obtenu est le suivant : 

if (42 = x) 
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II ne fonctionne pas, tout simplement. II genere une erreur, qui est souvent plus visible 
qu'un avertissement, et possede en outre l'immense avantage de stopper 1' execution du 
script, l'empechant ainsi de continuer sur la base d'informations fausses, ce qui pour- 
rait poser des problemes. Imaginez qu'un tel code controle l'envoi d'un formulaire de 
suppression d'utilisateurs, et que le test verifie qu'une case de confirmation est 
cochee... On causera certainement des degats si on opere sans de telles precautions. 

Deuxieme conseil : vous aurez peut-etre remarque que JavaScript n'exige pas toujours 
de terminer vos instructions par un point-virgule ( ; ). II s'agit en effet d'un separateur 
d'instructions, et non d'un terminateur ; il est par ailleurs optionnel apres les acco- 
lades fermantes. Hormis ce dernier cas, je vous conseille neanmoins de toujours uti- 
liser le point-virgule a la fin d'une ligne de code : vous n' aurez pas a vous rappeler de 
le remettre le jour ou vous rajouterez du code a la suite. 

Dernier conseil, particulierement destine aux debutants : mefiez-vous d'un point- 
virgule tape trop hativement derriere la parenthese fermante d'un if, for ou while ! 
Par exemple, le code suivant : 

Listing 2-23 Un script avec de gros problemes... 

if (42 < 21); 

alert ('youpi ! ') ; 
var msg = ' ' ; 
for (var index = 0; index < 10; ++index); 

msg += index + ' , ' ; 
while (true) ; 

if (confirm('Quitter ?')) 
break; 

Ce code affiche « youpi ! », laisse msg a la chaine vide, et cause une boucle sans fin 
qui aura tot fait d'epuiser l'interpreteur. Pourquoi ? Parce que le i f , le for et le whi 1 e 
ont un point-virgule en trop, discret, en fin de ligne, qui constitue une instruction 
vide. Comme, syntaxiquement, ces trois structures de controle ne gerent qu'une ins- 
truction, c'est cette derniere vide qui est utilisee. En somme, le code precedent est 
equivalent au code suivant, ou on repere bien mieux le probleme : 

Listing 2-24 Le meme, reformate 

if (42 < 21) 

I 

alert('youpi ! ') ; 

var msg = ' ' ; 

for (var index = 0; index < 10; ++index) 
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msg += index + ' , ' ; 
while (true) 

if (confirmC Quitter ?')) 
break; 

Attention done a ne pas etre trop zele avec les points-virgules... 

Ces conseils valent pour tous les langages dont la syntaxe est proche, voire identique, 
sur ces points : C, C++, Java, C#... 



Ameliorer la lisibilite 

Je recommande de toujours commenter la fin d'une fonction, au moins lorsque celle- 
ci depasse les 10 lignes. On se retrouve tres vite avec juste la fin d'une fonction 
visible, que ce soit parce quelle est tres longue (ce qui indique un probleme de modu- 
larity du code, soit dit en passant), ou parce qu'on a fait defiler le code source et que 
seule la fin subsiste. Dans les exemples de ce livre, la plupart des fonctions non tri- 
viales ont ainsi un commentaire de fin : 



function compute(factor) { 
} // compute 

Apres une condition ou une definition de boucle, allez systematiquement a la ligne et 
indentez, e'est tenement plus facile alors de voir quel code depend de votre structure 
de controle. Evitez ce genre d'indentations impropres : 

Listing 2-25 Une indentation tres discutable 

function badCodeO { 

if (arguments .length == 0) throw new Error('Ooops') ; 

console. log (' some log 1 ); 

for (var index = 0; index < 10; ++index) alert(index) ; 

console. info('some other info'); 

while (document, body. hasChildNodesO) clearFi rstNode() ; 

console. info(' done. ') ; 
} 
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Preferez une indentation correcte : 
Listing 2-26 Une indentation bien plus utile 

function betterCodeO { 

if (0 == arguments. length == 0) 

throw new Error('Missing arguments! Expected name.'); 
console. log(' some log'); 
for (var index = 0; index < 10; ++index) 

alert(index) ; 
console. info('some other info'); 
while (document, body. hasChildNodesO) 

clearFi rstNodeO ; 
console. info(' done. ') ; 
} // betterCode 

Enfin, je ne saurai trop vous encourager a toujours adopter des conventions de nom- 
mage dans vos codes source, de preference alignees sur les standards de l'industrie, ou 
en tout cas du langage employe. Void quelques lignes de conduite simples, souvent 
adoptees dans d'autres langages repandus : 

• Les types et espaces de noms utilisent une casse dite Came/Case majuscule, par 
exemple Ajax, Uploader ou PeriodicalUpdater. 

• Les constantes utilisent une casse majuscule ou les composants sont separes par 
des soulignes (_) : MAX, RECEX_SCRIPTS. 

• Les variables, arguments et proprietes utilisent une casse dite Came/Case minus- 
cule, c'est-a-dire que la premiere initiale est minuscule. Quelques exemples 
d'expressions tout a fait reelles : 

document . document El ement . f i rstChi 1 d . nodeVal ue, document . createEl ement. 

• Lorsqu'on cree des objets, je recommande chaudement d'utiliser une convention 
pour nommer les proprietes censees etre privees (non accessibles depuis l'exterieur 
de l'objet) : prefixez-les par un tiret bas, par exemple : 

_id, _each, _observeAndCache(). 

• Les noms de methodes devraient toujours commencer par un verbe a l'infinitif, 
par exemple createEl ement, removeChild ou adoptNode. Les methodes ren- 
voyant un booleen devraient utiliser un verbe a la troisieme personne du singulier, 
generalement au present de l'indicatif, adapte a la semantique de la methode. 
Exemples : hasChildNodesO, isBlankO, canClose(). 

Rien qu'en observant ces quelques regies simples, on ameliorera sensiblement le code. 
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Mieux deboguer du JavaScript 



JavaScript, c'est comme tout : plus nos outils sont bons, et plus on developpe vite. 
Croyez-le ou non, encore aujourd'hui, la majorite des developpeurs web n'utilisent 
pas d'outils evolues dans leur navigateur pour mettre au point leur JavaScript. Ces 
memes developpeurs, qui fremissent d'horreur a l'idee de devoir developper en Java, 
C++ ou C# sans un EDI haut de gamme (et ne parlons meme pas de Visual Basic), 
persistent a n'utiliser, pour travailler avec JavaScript, que l'equivalent d'un silex et 
d'un bout de bois. L'annexe D et cette section visent a vous elever au-dessus de cet 
etat prehistorique. 

Et pourtant, l'univers JavaScript propose les memes richesses que ceux des autres 
langages : editeurs, completion automatique, veritables EDI meme, frameworks de 
tests unitaires et fonctionnels, extraction automatique de documentation, etj'en passe. 

II ne s'agit pas ici de passer tout cela en revue, mais de nous pencher plus particulie- 
rement sur la question du debogage. Pour citer un membre du projet Mozilla, 
« deboguer du JavaScript, c'est un peu faire la chasse aux fantomes ». Mais il ne s'agit 
pas la d'une fatalite. Des outils peuvent vous aider considerablement, et nous allons 
en voir quelques-uns ici. 

Avant de commencer, , j'affirme haut et fort que pour deboguer du JavaScript, rien 
ne vaut Mozilla Firefox. Ce navigateur figure deja sur tous les postes de developpeurs 
web un tant soit peu consciencieux, dans la mesure ou, d'une part, il respecte infini- 
ment mieux les standards que MSIE et, d'autre part, il est bien plus agreable a uti- 
liser. Par ailleurs, il est disponible sur toutes les plates-formes, et represente plus de 
20 % du marche mondial des navigateurs web, ce qui equivaut a plusieurs centaines 
de millions d'internautes. 

Mais ce qui rend Firefox si utile pour les developpeurs web, c'est son mecanisme 
d'extensions. Tout un chacun peut fournir des fonctionnalites supplementaires, et 
cela autrement plus facilement qu'avec le mecanisme BHO (Browser Helper Object) 
disponible dans MSIE, qui est par ailleurs l'une des principales sources de problemes 
de securite sous Windows. Lorsqu'on developpe une page web, la meilleure methode 
aujourd'hui consiste certainement a travailler d'abord sous Firefox pour mettre au 
point le HTML, les CSS et les scripts, puis a tester exhaustivement sur les princi- 
paux autres navigateurs, dont bien sur MSIE, Safari et Opera. On sait en effet com- 
bien MSIE differe des standards en termes de CSS et aussi (quoique dans une bien 
moindre mesure) de JavaScript. 



Ne prenez pas JavaScript pour ce qu'il n'est pas 

Chapitre 2 



La console JavaScript 

Plusieurs navigateurs proposent une console JavaScript. II s'agit d'une fenetre qui 
recense les notifications de l'interpreteur JavaScript : erreurs, avertissements et mes- 
sages d'information eventuels. 

Certains navigateurs fournissent d'ailleurs un acces JavaScript a cette console, au tra- 
vers d'un objet global dedie, ce qui permet a vos scripts d'y placer un message plutot 
que de recourir au traditionnel mais penible appel a alert (lequel vous propulse vite 
dans un tourbillon de clics). 

Dans Mozilla Firefox 

Dans Mozilla Firefox, la console est accessible via le menu Outils>Console JavaScript. 
La console ressemble a ceci : 



Figure 2-3 

La console JavaScript de 
Mozilla Firefox 
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Notez quelle recoit aussi des notifications de l'analyseur CSS (la plupart des mes- 
sages d'erreur qu'on y rencontre sont souvent dus a des hacks CSS) et quelle conserve 
les notifications recues par le passe : elle ne s' efface que manuellement, en cliquant 
sur le bouton Effacer de sa barre d'outils. Les quatre premiers boutons permettent de 
filtrer l'affichage suivant le type de message. 

Par ailleurs il est possible d'y taper un fragment de code pour evaluation immediate 
(mais sur une seule ligne), a l'aide de la zone de saisie en face du bouton Evaluer : 



Figure 2-4 

Evaluation directe dans la 
console JavaScript 



Console JavaScript 


_CH 










UjC-LI" ET&LITi ^itrTri^^'Ti^liti 


i.. Messages 


^Effacer 










dm: i jr r i pr 1 1 ji i irjInmHi il hI iui i .f i hs FphI Mr h{ 'HTM 1 


,'?."') 




Evaluer 


true 





Donner vie aux pages 

Premiere partie 



Dans Opera 

Opera fournit egalement une excellente console JavaScript, qui est en fait incluse 
dans la console d'erreurs, accessible via Outils>Avance>Console d'erreur. Cette console 
recupere les erreurs de tous bords (comme CSS, JavaScript, SVG, HTML), et 
fournit de nombreux details sur chacune. Des options de filtrage en bas a gauche de 
la liste des erreurs permettent de ne voir, par exemple, que les erreurs JavaScript. 



Figure 2-5 

La console d'erreurs d'Opera, 
ici filtree sur JavaScript 
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Vous trouverez de nombreux details sur le debogage de JavaScript dans Opera a 
l'adresse http://my.opera.com/community/dev/jsdebug/. 

Dans Safari 

Safari fournit a partir de la version 1.3 un menu cache nomme Debug, qu'on peut 
activer en tapant dans un terminal (quand Safari n'est pas lance) : 

I defaults write com. apple. Safari IncludeDebugMenu 1 

L'astuce figure dans la FAQ_de Safari sur le site d'Apple, a la question 14 : 
http://developer.apple.eom/internet/safari/faq.html#anchor14. 

Une fois le menu Debug disponible, on y trouve une plethore d'options, dont Show 
JavaScript console (Maj+Cmd+J). 



Figure 2-6 

La console JavaScript 
« cachee » de Safari 
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Dans Konqueror 

Konqueror propose egalement une console JavaScript, au sein de son debogueur 
JavaScript rudimentaire. Celui-ci n'est pas active par defaut : il faut aller dans Confi- 
guration>Configurer Konquerorxlava & JavaScriptxIavaScript et cocher les options Activer 
le debogueur et Rapports d'erreur. Le debogueur est alors accessible depuis le menu 
Affichage>Debogueur JavaScript (sur une page web, pas sur la page d'accueil speciale de 
Konqueror). 



Figure 2-7 

La console JavaScript dans 
le debogueur rudimentaire 
de Konqueror 
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Console JavaScript 



Dans MSIE 

MSIE 6 ne fournit pas de console JavaScript. Le mieux que Ton puisse faire consiste 
a cocher l'option permettant de voir une boite de dialogue a chaque erreur de script, 
afin d'avoir quelques details. Mais c'est penible, et c'est quoi qu'il en soit une bien 
maigre consolation. Si vous souhaitez toutefois y recourir, l'option est dans 
Outils>0ptions lntemet>Avance>Navigation>Afficher une notification de chaque erreur de 
script. II existe tout de meme un debogueur telechargeable a part : consultez 
l'annexe D pour plus de details. 
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Venkman, le debogueur JavaScript 

Je n'entrerai pas dans les details des differents debogueurs JavaScript, mais nous 
allons examiner ensemble les bases du debogueur JavaScript concu pour l'univers 
Mozilla (navigateurs Mozilla et Firefox, et meme le logiciel de courrier electronique 
Thunderbird !) : Venkman. Dans leur tradition de clins d'ceil au film Ghostbusters, 
l'equipe Mozilla a en effet nomme son debogueur d'apres le personnage de Bill 
Murray. 

Ce debogueur se telecharge a part, sous forme d'une extension. La page officielle est 
http://www.mozilla.org/projects/venkman/. Le telechargement est par ailleurs dispo- 
nible sur le site officiel des extensions et themes pour les produits Mozilla, a l'adresse 
https://addons.mozilla.org/firefox/216/. Vous pouvez egalement tenter l'installation de 
sa version francisee : http://extensions.geckozone.org/Venkman. Mais al'heure ouj'ecris 
ces mots celle-ci n'a pas revu sa definition de compatibilite a la hausse, et refusera de 
s'installer sur un Firefox 1.5.0.1 ou ulterieur (et je ne saurai trop vous conseiller d'etre 
a jour, car il s'agit de mises a jour de securite). 

II est certes possible d'ajuster manuellement l'information dans le paquet, mais c'est 
une manipulation technique un peu delicate, qui n'entre pas vraiment dans le cadre 
de ce chapitre. J'utiliserai done pour ce qui suit la version anglaise. 

Une fois l'extension installee, elle est accessible par le menu Outils>JavaScript 
Debugger. Le debogueur est une application un peu lourde, et mettra quelques 
secondes a s'afficher. Attention ! Sous Firefox 1.5, il semble qu'une fois ferme, il ne 
puisse plus etre ouvert de nouveau a moins de redemarrer Firefox. Peut-etre ce bogue 
aura-t-il disparu a l'heure ou vous lirez ces lignes. 



Figure 2-8 

Venkman, le debogueur 
JavaScript 
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L'interface est composee comme suit : 

• En haut, le menu et la barre d'outils. A noter : 

• Le menu File permet notamment d'ouvrir une autre page ou un autre script, de 
sauvegarder et de restaurer l'etat des points d'arret {breakpoints) et des vues espion 
{watches). 

• Le menu Debug contient les memes commandes que la barre d'outils, mais aussi 
des sous-menus Error Trigger et Throw Trigger, qui permettent de configurer le 
debogueur pour qu'il agisse en cas d'erreur ou de lancement d'exception. 

• Dans la barre de gauche, pas moins de six vues distinctes, groupees en trois series 
d'onglets (mais vous pouvez ajuster comme bon vous semble). On peut afficher 
ou masquer les vues a loisir, par exemple a l'aide du menu Views>Show/Hide. 

• La vue Loaded Scripts affiche tous les scripts charges ; on est souvent desarconne 
par l'apparition des fichiers de script de Firefox lui-meme (par exemple 
prefcalls. js). Heureusement, les scripts de votre page apparaissent en haut 
(ici demo. js). 

• La vue Open Windows affiche les fenetres Firefox ouvertes, ce qui vous permet de 
basculer de l'une a l'autre pour choisir les pages et scripts a deboguer. 

• La vue Local Variables affiche les variables locales alors que vous etes en train d'exe- 
cuter un pas a pas dans une fonction. Cela vous evite d'avoir a definir des vues 
espion pour ces variables. 

• La vue Watches affiche les vues espion : des expressions quelconques que vous avez 
saisies et qui sont evaluees a chaque pas de votre debogage interactif 

• La vue Breakpoints liste les points d'arrets. 

• La vue Call Stack affiche la pile d'appels, c'est-a-dire la sequence des appels imbri- 
ques de fonction qui ont amene a la ligne en cours d'execution. 

• Sur la droite, deux vues se partagent l'espace. 

• En haut, la vue Source Code, qui affiche le code source du script selectionne dans la 
vue Loaded Scripts, et dans laquelle se passe le pas a pas. C'est aussi la qu'on mani- 
pule les points d'arret. 

• En bas, se trouve la vue Interactive Session, console JavaScript amelioree, dotee 
d'un interpreteur de commandes special (commandes demarrant par /). Une liste 
detaillee des commandes est disponible en cliquant sur le lien qui s' affiche par 
defaut dans cette console, ou en naviguant directement sur l'URI x- j sd : he! p. 

Void un exemple basique d'utilisation de Venkman, qui est tres puissant, mais un 
peu fouillis, il faut bien le reconnaitre. Reprenez 1' exemple de code pour les fonctions 
listant dynamiquement leurs arguments. Je vous conseille de recuperer les fichiers 
disponibles dans 1' archive des codes source pour cet ouvrage, disponible en ligne sur 
le site des editions Eyrolles. 
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Ouvrez le fichier index.html, puis ouvrez le debogueur JavaScript. Vous devriez 
obtenir une vue equivalents a celle de la figure 2-8. Fermez la vue Open Windows, qui 
ne vous sert a rien, faites glisser vers le bas la separation entre Source Code et Interac- 
tive Session, et videz la session (clic droit dessus ou menu View, option Clear Interactive 
Session). Double-cliquez a present sur le script demo, js dans la vue Loaded Scripts. 
Vous devriez obtenir le resultat suivant : 



Figure 2-9 

Notre script charge dans un 
Venkman plus utilisable 
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function addL i si ene r { ** L emei il , bayeName, handler] { 
if (elcrcnt .addEvcnt Listener) 

element .*&iEvenELi«Tentr(baseNAn«, handler, fi 
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function bindButtonsU [ 

adWLi st ewr [ document . get El e m*nt Sy\ d t ' h i nShowA rq&l I 

showflrgslfheLLo - , 1, 2, 3.14); 



addListen#r{ document .get Eleven* By |d( "hmsticiwArgs? 
BhowAros2[' hello' p 1, 1, 3.14)- 




Posez a present un point d'arret dans la fonction showArgsl : double-cliquez sur le 
nom de la fonction dans la vue Loaded Scripts, et cliquez dans la marge du code source 
sur le tiret en face de la ligne 20, ligne soumise a la boucle : vous obtenez un B blanc 
sur fond rouge, qui indique un point d'arret. 



Figure 2-10 

Le point d'arret sur la ligne 20 
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function showArgsl () { 

var msg = ' ' ; 

for (var index = 0; index < 
msg += arguments[index] 

alert (msg) ; 
} // showArgsl 



Reprenez a present la page web et cliquez sur le bouton Premiere version. La fonction 
showArgsl est appelee, le point d'arret est declenche, on bascule dans Venkman, et le 
debogueur passe en mode pas a pas. 
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Figure 2-11 

Notre debogueur 
en mode pas a pas 
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Remarquez plusieurs points : 

• La barre d'outils est desormais completement active, puisque les commandes de 
pas a pas sont desormais pertinentes. 

• La vue Local Variables liste la portee courante (scope), avec vos variables index et 
msg, ainsi que le sens actuel de thi s (on voit qu'il s'agit la de l'objet wi ndow, et non 
du bouton sur lequel on a clique). 

• La ligne courante est mise en exergue (en jaune sur votre ecran). 

• La vue Interactive Session a egalement signale 1' arret, et a affiche un contexte de 
deux lignes autour de la ligne concernee. Cette vue est un veritable debogueur en 
ligne de commande, pour les habitues d'outils comme gdb notamment. 

Nous allons faire un pas a pas de survol (n'entrant pas dans le corps de nos fonctions 
appelees), ce qu'on appelle en anglais un step over. Cliquez sur le bouton Step over ou 
appuyez sur F12 : vous passez a la ligne suivante, qui est la reprise de la boucle. Une 
serie d'appuis vous mene a travers les tours de la boucle, et vous pouvez suivre dans la 
vue Local Variables revolution des variables index et msg. Vous arrivez finalement au 
alert, qui s'execute. Repassez ensuite au niveau superieur, dans la fonction anonyme 
attachee a l'evenement click du bouton. Pour continuer 1' execution normalement, 
plutot qu'en pas a pas, utilisez la commande Continue ou la touche F5. 

II s'agit ici de l'utilisation la plus courante du debogueur. 
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Quelques petites precisions pour finir : 

• Les points d'arret peuvent etre configures tres finement, en precisant par exemple 
une condition pour leur declenchement, ou un nombre de passages ((rigger count) 
avant qu'ils ne se declenchent. On peut bien entendu combiner les deux. Pour 
cela, faites un clique droit sur un point d'arret (par exemple sur le B dans la 
marge) et choisissez en bas du menu surgissant l'option Breakpoint properties : 



Figure 2-12 

Propriet.es d'un point d'arret : 
que de possibilit.es... 
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• Lorsqu'on est temporairement gene par un point d'arret, plutot que de le suppri- 
mer, il est preferable de le desactiver. II suffit pour cela de cliquer a nouveau sur le 
B : il passe alors en F (Future breakpoint). Pour le reactiver, cliquez sur le bouton 
droit et choisissez Set breakpoint. 

Venkman dispose d'une documentation exhaustive : n'hesitez pas a la consulter pour 
en decouvrir tous les secrets si vous avez des besoins plus complexes a realiser. 



Firebug, le couteau Suisse du developpeur Web 2.0 

Venkman est souvent juge trop lourd, ou trap complexe, pour un usage classique. II 
se trouve que depuis quelques temps, on dispose d'une alternative, au travers d'une 
des nombreuses fonctions de l'extension Firebug. 
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Pour les developpeurs web, Firefox propose une plethore d' extensions sympathiques. 
Les deux plus populaires, et de loin, sont la Web Developer Toolbar de Chris Pederick, 
et Firebug de Joe Hewitt. 

La premiere nous permet de triturer la page elle-meme, en affichant quantite 
d'informations utiles et en activant ou desactivant facilement des scripts, feuilles de 
styles, etc. Elle est immensement utile, mais ne concerne pas specialement JavaScript 
ou le DOM. 

Firebug fournit une serie d'outils dedies au debogage, comme son nom l'indique. 
Nous aurons l'occasion de l'utiliser au chapitre 3 pour examiner le DOM de la page 
(inspecteur DOM alternatif), ainsi qu'aux chapitres 5 et 6 pour examiner le detail de 
nos requetes Ajax (une fonctionnalite des plus precieuses !). Pour l'instant, nous 
allons examiner ses capacites de debogueur JavaScript. 

Firebug est installable depuis http://addons.mozilla.org/firefox/1843/. Une fois l'exten- 
sion installee et Firefox en mode redemarrage, vous disposez en bas de vos pages d'un 
petit indicateur. II est gris quand vous n'etes sur aucune page (par exemple, sur la 
page vierge d'accueil que vous avez peut-etre configuree), vert quand vous etes sur 
une page sans erreur JavaScript, et rouge dans le cas contraire. 

Figure 2-13 

Les etats de I'indicateur Firebug 
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En cliquant sur cet indicateur, vous ouvrez la barre Firebug, placee en bas de votre 
page. On peut aussi l'ouvrir et se placer directement sur la ligne de commande de la 
console JavaScript en pressant Ctrl+Maj+L Firebug renferme en effet une console 
JavaScript fort pratique, interactive, plus utile (et plus jolie !) que celle fournie en 
standard dans Firefox. Le menu Options de la console Firebug permet de preciser ce 
qu'on souhaite y voir apparaitre (voir figure 2-14). Par defaut, il affiche les erreurs 
JavaScript (mais pas les avertissements) ainsi que les erreurs XML. 

LongletDebugger propose un debogueur tout simple, mais largement suffisant dans 
la plupart des cas. Attention ! Deux debogueurs ne peuvent pas cohabiter dans 
Firefox. Si vous souhaitez utiliser celui de Firebug, desinstallez d'abord Venkman et 
relancez Firefox. 
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Figure 2-14 

La console Firebug 
et son menu Options 
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Traiter dynamiqueinent les arguments 
d'une fonction 

Ces deux boutons declenchentdeux fonctions similaires, qui affichent la lists de 
leurs arqujiienLs satis avoir declare de paraniyLres. La pretmrdre compose cette 
liste manuelleinerit, la Seconds utilise nn hinciing pour pnuvoir recnurir a Array, join. 
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Chargez done a nouveau notre exemple de fonction listant ses arguments, et cliquez 
sur l'onglet Debugger. Vous y trouverez le code source de votre script. Firebug ne liste 
que les scripts charges par la page, ce qui est plus pratique que le comportement de 
Venkman. Une liste deroulante Scripts, en bas du debogueur, permet de choisir le 
script voulu, ce qui est inutile ici. Faites defiler le script pour retrouver la ligne 20, et 
cliquez dans la marge a gauche du numero de ligne : vous venez de definir un point 
d'arret. Cliquez a present sur le bouton Premiere version de notre page, et le point 
d'arret se declenche (voir figure 2-15). 

Remarquez qu'une vue supplemental est immediatement apparue sur la droite : 
les variables locales. Par ailleurs, juste en dessous, vous trouverez la pile d'appels sous 
forme d'une liste deroulante. Pour progresser en pas a pas de survol {step over), 
utilisez le premier bouton a fleche coudee ou Ctrl+Alt+Maj+Droite (une veritable com- 
binaison de touches !). 

Les autres raccourcis sont decrits dans le menu Outils>Firebug, et sont logiques malgre 
leur complexite : ils debutent tous par Ctrl+Alt+Maj, apres quoi Droite fait un step over, 
Bas un step into (entre dans nos fonctions lorsqu'on les appelle) et Haut un step out 
(termine la fonction courante et en ressort). 
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Figure 2-15 

Declenchement du point d'arret 
dans le debogueur de Firebug 
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Traiter dyiiamiquement les arguments 
d'une fonction 

Ces deux boutons declenchent deux functions similaires, qui affichent la liste de 
leurs atgujiienLs sans avoir declare de parameLres. La premiere compose ceLLe 
liste manual lament", la seconde utilise un birttitfttf POUT pouvotr r«SCOUrrr -I Army. join. 
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Pour simplement continuer 1' execution jusqu'a la fin (ou jusqu'au prochain point 
d'arret), cliquez sur la fleche bleue ou faites Ctrl+Alt+Maj+Gauche. 

Firebug regorge de possibilites, et en terme de JavaScript, il ne s'arrete pas la. Si vous 
souhaitez simplement permettre a vos scripts de vous signaler quelque chose pendant 
le developpement, Firebug met a votre disposition un objet global nomme console, 
avec cinq methodes: error, warn, info, debug et log. Elles envoient le message 
passe en parametre, avec le bon type, dans la console de Firebug (voir figure 2-16). 

Par ailleurs, Firebug met a disposition toute une serie de methodes pour vos tests 
unitaires, appelees assertions (le terme est familier a quiconque a deja fait des tests 
unitaires, dans quelque langage que ce soit). On trouve aussi des methodes pour aider 
a la mesure du temps d'execution de fragments de code, a l'affichage de textes a para- 
metres formates, ou a l'examen d'objets. 

Enfin, sachez que des fonctions courtes, dans le style de Prototype, sont disponibles 
pour aller rapidement chercher un element par son ID, faire une extraction CSS ou 
encore une extraction XPath, directement depuis la console ! 

Vous en saurez davantage sur la page de documentation de ces possibilites dans 
Firebug : http://joehewitt.com/software/firebug/docs.php. 
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Figure 2-16 
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Pour aller plus loin 



Livres 



JavaScript : The Definitive Guide (5 e edition) 
David Flanagan 

O'Reilly Media, aout2006, 1 018 pages 
ISBN 0-596-10199-6 

La reference historique, avec tous les details du langage, et une plethore d'exemples. 
Existe aussi en francais dans sa 4 e edition : 

JavaScript (4^ edition) 

David Flanagan 

O'Reilly, septembre 2002, 955 pages 

ISBN 2-841-77212-8 

JavaScript Bible (5 t 'edition) 

Brendan Eich 

Wiley Publishing, mars 2004, 1 236 pages 

ISBN 0-764-55743-2 

L'autre reference, qui possede l'avantage d'etre ecrite par l'inventeur du langage, 
lequel continue de piloter son evolution. En revanche, ne dispose a priori pas d'une 
version francaise... 



Sites 



Ne prenez pas JavaScript pour ce qu'il n'est pas 

Chapitre 2 

PPK on JavaScript 

Peter- Paul Koch 

New Riders Publishing, aout 2006, 400 pages 

ISBN 0-321-42330-5 

Un ouvrage tout recent et bien fait par un des principaux gourous du langage. Decrit 
notamment en detail les interactions entre JavaScript et CSS. 

Les expressions regulieres par I'exemple 
Vincent Fourmond 
Eyrolles, aout 2005, 126 pages 
ISBN 2-914010-65-6 

Une bonne facon de se faire les dents sur ce sujet qui fait injustement peur, et dont les 
benefices sont pourtant considerables ! 



La Mozilla Developer Connection regorge de ressources precieuses sur JavaScript 
et le DOM. Je vous conseille en particulier leur guide et leur reference de 
JavaScript 1.5. Une partie a ete traduite en francais. 

— http://developer.mozilla.org/en/docs/JavaScript 

- http://developer.mozilla.org/fr/docs/JavaScript 

Rien ne vaut la specification officielle pour verifier un point de detail, ou determi- 
ner si MSIE est fautif ou non, mais attention, c'est... aride : 
http://www.ecma-international.org/publications/standards/Ecma-262.htm 

Brendan Eich est l'inventeur et le chef de projet actuel du langage. Son blog per- 

met de suivre l'actualite de JavaScript et de gouter aux futures ameliorations : 

http://weblogs.mozillazine.org/roadmap/ 

Peter- Paul Koch, dont le livre figure plus haut : 

http://www.quirksmode.org 

Venkman, le debogueur JavaScript aux enzymes, est disponible comme extension : 

https://addons.mozilla.org/firefox/216/ 

Firebug, le couteau Suisse du developpeur Web 2.0, est lui aussi une extension : 
https://addons.mozilla.org/firefox/1843/ 
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Manipuler dynamiquement 
la page avec le DOM 



JavaScript est au developpeur web ce que les outils sont a l'artisan : le moyen de tra- 
vailler. Encore faut-il avoir quelque chose sur quoi travailler. Pour un developpeur 
web qui cherche a rendre sa page vivante, cette matiere, c'est le DOM, le Document 
Object Model, un ensemble d'interfaces permettant aux langages de programmation 
d'acceder aux objets qui composent le document. C'est via ces interfaces qu'on peut 
manipuler efficacement la page. 

Dans ce chapitre, nous allons voir qu'il n'y a pas un DOM mais plusieurs, classes par 
niveau et par theme. La cle du succes residant dans la connaissance des quelques 
interfaces fondamentales, nous consacrerons quelques pages a decouvrir celles-ci, en 
nous concentrant sur les aspects noyau et HTML. Fidele a l'esprit de l'ouvrage, nous 
soulignerons quelques pratiques recommandees, avant d'explorer dans le detail la 
gestion des evenements du document. Pour finir, nous construirons quelques exem- 
ples concrets tres souvent utiles. 
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Pourquoi faut-il maitriser le DOM ? 

II est aise de croire qu'on peut se passer d'etudier les details du DOM, en particulier 
lorsqu'on a 1'intention de recourir a des bibliotheques ou frameworks tels que Prototype, 
script.aculo.us ou encore Dojo. C'est une attitude dangereuse, qui peut entrainer bien 
des heures perdues au debogage, simplement parce qu'on aura voulu faire l'economie de 
quelques heures en amont. 

La pierre angulaire des pages vivantes 

On Fa vu en introduction, il n'y a pas de pages vivantes sans le DOM. Ceux qui en 
sont encore a manipuler leurs pages « a l'ancienne », ce qu'on appelle aujourd'hui le 
DOM niveau 0, sont condamnes au recyclage : ces possibilites ne font l'objet d'aucun 
standard et sont deja, pour ainsi dire, en preretraite. Gardez-vous de subir le meme 
sort en vous accrochant a des techniques obsoletes ! 

Ce serait d'autant plus dommage qu'en soi, le DOM est assez simple. Malgre une cer- 
taine verbosite et une plethore d'interfaces, la complexite n'est qu'apparente, et nous 
avons pour une fois la chance d'avoir un standard plutot coherent dans l'ensemble, et 
bien pris en charge par les principaux navigateurs. Une fois certaines regies et certains 
concepts assimiles, l'utilisation est sans surprise (a 1' exception, comme toujours, de 
certains comportements sur MSIE, que nous aborderons specifiquement). 

Maitriser la base pour utiliser les frameworks 

Quand bien meme vous envisagez d'utiliser des bibliotheques facilitant grandement 
votre travail, comme Prototype, voire des frameworks entiers tels que script.aculo.us 
ou Dojo, cela ne vous dispensera pas de connaitre un minimum le DOM. 

De nombreuses fonctions de ces bibliotheques sont documentees en utilisant le voca- 
bulaire du DOM : ID d'element, nceuds fils, noeud pere, collection, noeuds textuels 
sont autant de concepts DOM qui sont utilises a tout bout de champ par les biblio- 
theques de plus haut niveau. Sans maitriser au moins les bases, vous risquez fort de 
vous y perdre. 

Comprendre les details pour pouvoir deboguer 

Les bibliotheques ne sont d'ailleurs pas exemptes de bogues, loin s'en faut. Meme 
lorsque vous utilisez des fonctionnalites stables, rien ne vous empeche de mal inter- 
preter le sens d'un argument, d'en oublier un autre, ou de mal satisfaire aux exigences 
d'une fonction. 
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Lorsque le probleme resultant va faire surface, vous n'aurez d'autre choix que de 
demarrer une seance de debogage ; mais meme avec de bons outils a l'appui (debogueur 
JavaScript et inspecteur DOM sont des incontournables), vous serez bien en peine de 
comprendre tant le code JavaScript que l'arbre DOM examines si vous avez neglige 
d'etudier un peu DOM dans le detail. Pour quelques heures economisees a tort, vous 
voila face a de nombreuses heures fastidieuses et peut-etre quelques cachets d'aspirine. 

En somme, je ne saurais trop vous recommander de consacrer un peu de temps a lire 
la suite de ce chapitre. Vos pages web vous le rendront au centuple. 



Le DOM et ses niveaux 1, 2 et 3 

Le DOM est un standard aux multiples facettes. Non seulement il evolue dans le 
temps, au travers de niveaux (qui tiennent lieu de versions), mais en plus il est modu- 
larise par theme, ou aspect si vous preferez. 



Vue d'ensemble des niveaux 

Void un tour d'horizon des niveaux successifs du DOM. Les specifications W3C 
indiquees peuvent etre arides a consulter pour le debutant : si vous voulez vous y 
plonger rapidement, vous gagnerez a lire d'abord les conseils de l'annexe C. 

Tableau 3-1 Les niveaux du DOM 



Niveau Description 

II ne s'agit pas d'un standard a proprement parler, mais du nom sous lequel on designe 

aujourd'hui les possibility de manipulation du document sans prise en compte du DOM, telles 

qu'on en trouve encore dans de trop nombreux didacticiels et ouvrages (tous datant un peu, 

il est vrai). Par exemple, le code suivant : 

document . forms ['inscripti on '] . nom_c"lient. value 

...est tres clairement du niveau : la collection forms ne propose pas d'operateur [] dans le 

DOM, meme si sa fonction namedltem a un sens equivalent (et encore, pas en XHTML). 

Quant a I'utilisation d'un objet fils nomme d'apres I'attribut name du champ, elle est totalement 

absente du DOM egalement : on prefere acceder directement au champ par son ID, oil qu'il soit 

dans le document. 

Peter-Paul Koch propose un excellent article sur ce niveau : 

http://www.quirksmode.org/js/domO.html. 



Le niveau est le premier veritable standard du DOM, remontant a 1998 (2000 pour une revision 
jamais finalisee). II n'etait pas encore decoupe en modules etfournissait deja les principals 
interfaces pour le noyau et HTML. 
Derniere revision : http://www.w3.org/TR/2000/WD-DOM-Level-1 -20000929/. 
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Tableau 3-1 Les niveaux du DOM (suite) 



Niveau Description 



L'ensemble des modules du niveau 2 date du 1 3 novembre 2000, mais le module HTML a subi 
cinq revisions depuis, la derniere remontant a Janvier 2003. Ce niveau ajoute principalement 
la prise en charge de XHTML 1 .0, avec entre autres impacts une declinaison de nombreuses 
methodes pour gerer les espaces de noms. L'interface HTMLOpti onsCol 1 ecti on fait 
son apparition. 

Le niveau 2 est celui le plus largement pris en charge par les principaux navigateurs actuels. 
Nous nous interesserons principalement aux modules noyau, evenements et HTML : 

• http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001 1 1 3/ 

• http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001 1 1 3/ 

• http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-200301 09/ 



Le travail actuel porte sur le niveau 3, etat de I'art du DOM. II modifie principalement les aspects 
noyau, vues/formatage et evenements, et ajoute plusieurs modules : Load and Save, Validation 
et XPath. En regard des possibilites deja existantes, c'est surtout ce dernier module qui ajoute de 
la valeur, a mon sens. Nous I'utiliserons d'ailleurs au chapitre 5, lorsque nos requetes Ajax 
recupereront un contenu XML. 

Ce niveau vise surtout a ajouter des possibilites de I'univers XML a nos pages (comparaison de 
nceuds et d'arbres, gestion de I'encodage, des URI relatifs, de la normalisation, de la validite 
vis-a-vis des schemas et DTD), et a simplifier certaines operations (par exemple grace a 
adoptNode, renameNode, textContent etwholeText ou aux mecanismes 
permettant d'associer des donnees utilisateur aux nceuds). La gestion des evenements est aussi 
mieux specifiee. 

Certains modules sont deja finalises : Noyau, Load and Save et Validation. Les autres sont encore 
en travaux. Ceci dit, les dernieres revisions datent d'avril 2004, le W3C faisant la aussi la preuve 
de son extraordinaire rapidite... On citera principalement le module noyau : 
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/. 



Support au sein des principaux navigateurs 

Comme on a pu le voir a l'avant-propos, les principaux navigateurs prennent plutot 
bien en charge le DOM dans son niveau 2. C'est le cas de Mozilla, Firefox, Camino, 
Safari, Konqueror et Opera, pour ne citer qu'eux. MSIE dispose aussi d'une bonne 
prise en charge, malgre quelques ecarts helas problematiques, notamment pour la 
gestion des listes dans les formulaires (on y reviendra dans le detail plus tard). 

Certains fournissent partiellement le niveau 3, comme Firefox et done Camino 
(notamment le module XPath et les possibilites XSLT !), Opera (XPath et Load and 
Save) et Konqueror. Cote MSIE, il ne faut pas s'y attendre avant au moins la 
version 8, soit dans plusieurs annees... 



Manipuler dynamiquement la page avec le DOM 

Chapitre 3 



Les aspects du DOM : HTML, noyau, evenements, styles... 

Nous l'avons deja evoque, le standard DOM est aujourd'hui divise en modules, ou 
aspects, afin de mieux structurer son contenu et de faciliter la consultation. En void 
un rapide tour d'horizon (les modules marques d'une asterisque ne disposent pas 
d'une version finalisee a l'heure ou j'ecris ces lignes) : 



Tableau 3-2 Modules du DOM avec 


leur niveau d'apparition et leur derniere revision 


Module Apparu Derniere Description 
dans le version 
niveau 


Noyau {Core) 


1 07/04/2004 Interfaces fondamentales (voir prochaine section). 


HTML 


1 


09/01/2003 Interfaces specifiques aux contenus des documents (X)HTML. 


Vues (Views) 


2 


1 3/1 1 /2000 Manipulation d'une representation visuelle specifique d'un 
document (par exemple une fois qu'une feuille CSS aura ete 
appliquee). 


Evenements (Events) 


2 


13/11/2000 


Gestion evenementielle (ecoute, traitement, propagation...). 


Style 


2 


1 3/1 1/2000 Manipulation des feuilles de styles et des styles calcules pour 
chaque noeud. 


Traversal and Range 


2 


13/1 1/2000 Parcours et filtrage d'un document (traversal) et manipulation 
de fragments de documents (range). 


Load and Save 


3 


07/04/2004 Stockage et recuperation de documents par (de)serialisation. 


Validation 


3 


1 5/1 2/2003 Verification de la conformite du document a sa grammaire 
(DTD/schema). 


XPath* 


3 


26/02/2004 


Extraction de noeuds du document a I'aide de la syntaxe XPath. 


Views and Formatting* 3 


26/02/2004 


Extensions au module Vues. 


Abstract Schemas* 3 


27/07/2002 Manipulation des grammaires de document (DTD, schema, etc.). 



Maltriser les concepts : document, noeud, element, 
texte et collection 

II faut d'abord comprendre que le DOM au sens W3C s' applique a un document 
de type XML. Cela n'implique pas forcement que la syntaxe du document soit 
conforme a XML (meme si c'est generalement le cas), mais que le document resultat 
soit d'une nature identique : un arbre de noeuds imbriques les uns dans les autres. 

Par consequent, dans le cadre de pages web, on pourra exploiter le DOM d'autant 
plus efficacement (et avec moins de surprises potentielles) qu'on utilise un balisage 
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conforme a XHTML 1 strict. Un balisage plus laxiste, moins coherent, du type de 
HTML 4.01, peut engendrer un DOM parfois... inattendu ! 

Si ces notions de balisage semantique et de differences entre XHTML et HTML 
vous semblent un peu confuses, n'hesitez pas a faire un tour a l'annexe A. 

Le DOM de votre document : une arborescence d'objets 

Un DOM est done une arborescence d'objets, ou plus generalement de noeuds, qui 
represente le document, e'est-a-dire, dans le cas qui nous concerne, la page web. On 
accede au document lui-meme au travers d'une interface Document. Lorsqu'on part 
de la pour explorer le contenu du document, on ne tombe que sur des noeuds, mais 
chacun d'un type specifique. 

Les principaux types de nceuds refletent les differentes categories de balisage possi- 
bles dans un document XML (done XHTML) : elements, attributs, commentaires, 
textes (ce qu'on met generalement entre la balise ouvrante et la balise fermante), mais 
aussi des types moins courants, comme « instruction », le type des declarations 
DOCTYPE par exemple. 

Tous ces types partagent un ensemble de proprietes et fonctions heritees de leur type 
generique : le noeud (node). Mais ils ont aussi leurs specificites, representees par leurs 
interfaces dediees (par exemple, El ement pour les elements, ou Attr pour les attributs). 

Larborescence du DOM est souvent bien plus verbeuse que le balisage XHTML 
correspondant, et e'est souvent une source de surprise pour les debutants. Si on n'y 
prend pas garde, elle peut causer des confusions responsables de bien des bogues dans 
les scripts exploitant le DOM. 

Void un document XHTML d'exemple : 

Listing 3-1 Un document XHTML simpliste 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www . w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

* charset=iso-8859-15" /> 
<title>Un document tout petit</title> 
</head> 
<body> 

<hl>Un document tout petit</hl> 
<p>Ceci est un petit document</p> 
</body> 
</html> 
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Derriere ce document se cache une arborescence DOM plus epaisse qu'on ne 
pourrait croire ! 



Figure 3-1 

Le DOM de ce document, vu 
par I'inspecteur DOM de Firefox 



(■■■html 
BHTML 
SHEAD 
■#text 
■META 
BTITLE 
■#text 
- BODY 
#text 
SHI 
L #text 
#text 
OP 

L #text 
#text 



On voit bien que la racine est un objet Document ; le html minuscule represente un 
nceud de type instruction, qui correspond a la declaration DOCTYPE en haut du code 
source (html est le nom de l'element racine defini par la declaration). Mais que sont 
tous ces nceuds #text ?! Et pourquoi les balises sont-elles en majuscules ? 

Le plus simple d'abord : les balises apparaissent en majuscules parce que, meme si 
XHTML exige des balises minuscules (car XML est sensible a la casse, et la DTD 
definit les balises en minuscules), le DOM utilise generalement les noms canoniques 
des balises, ce qui implique generalement qu'ils soient en majuscules. Finalement, la 
raison d'etre des #text n'est guere plus compliquee. Comme nous le verrons a nou- 
veau plusieurs fois dans les sections suivantes, consacrees aux principales interfaces 
du DOM noyau et HTML, une balise non vide (c'est-a-dire une balise disposant de 
versions ouvrante et fermante, et ayant au moins un caractere entre les deux) ne con- 
tient pas directement le texte qui y figure. On a ici deux nceuds : un noeud de type 
element pour la balise a proprement parler (parties ouvrante et fermante), et un 
noeud de type texte pour le texte figurant entre les deux. 

Prenons le fragment suivant : 



<title>Un document tout petit</title> 
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Dans le DOM, ce fragment est represente par deux noeuds, comme on peut le voir 
sur la figure 3-1 : 

1 Un noeud element nomme TITLE, sans valeur. 

2 Un noeud texte sans nom (d'ou le #text), de valeur Un document tout petit. 

Ce que nous prenons pour des espaces sans signification particuliere - sous pretexte 
qu'un navigateur va representer la plupart des series d'espaces (et retours chariot, tabu- 
lations, etc.) sous forme d'un seul espace a l'affichage - ne disparait pas pour autant du 
document, et se retrouve done dans le DOM. Ainsi, les nceuds texte figurant avant 
HI, entre HI et P, et apres P, representent les lignes vides entre ces elements. 

Nous verrons un peu plus tard, en parlant de l'interface Text, que le type MIME du 
document (principalement text/html ou applicati on/xhtml +xml) influe sur les 
caracteres qu'on trouve dans les noeuds texte ainsi que sur les ajustements que le navi- 
gateur peut realiser a la creation du DOM. Par exemple, si vous regardez attentive- 
ment la figure 3-1 et la comparez au listing 3-1, vous verrez qu'il manque a priori un 
noeud texte entre META et TITLE. 

Voyons a present une presentation des principales interfaces, en commencant par 
celles du module noyau. 



Node 



C'est l'une des deux interfaces incontournables du DOM. Tous les noeuds d'un 
document, quel que soit leur type specifique, sont avant tout des noeuds. Chaque 
interface dediee herite done de l'interface Node. Du coup, toutes les interfaces sur 
nceuds que vous manipulerez (elements, attributs, textes...) disposeront des pro- 
prietes et methodes de Node. 

On peut done tout faire rien qu'en utilisant ces methodes, mais lorsqu'on manipule 
des elements, on utilisera generalement les methodes de plus haut niveau de l'inter- 
face El ement, notamment pour manipuler les attributs (sinon, c'est l'enfer !). Et dans 
le cadre precis de pages web, on aura recours a toutes les proprietes predefinies pour 
chaque type de balise. 

Void les quatre proprietes fondamentales de Node. 

Tableau 3-3 Proprietes fondamentales de Node 



Propriete 

nodeName 



Description 

Le nom du noeud. II varie suivant le type du noeud. Cas principaux : pour un 
element, equivalent de la propriete tagName ; pour un noeud texte, #text ; 
pour un attribut, equivalent de la propriete name. 
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Tableau 3-3 Proprietes fondamentales de Node (suite) 





nodeType 


Le type du nceud. Valeur numerique indiquant le type du nosud (element, texte, 
attribut, etc.). Les navigateurs offrant une prise en charge propre fournissent les 
constantes pour I'ensemble des types, tandis que les autres vous laissent vous 
debrouiller avec les valeurs numeriques. Voir plus bas pour les principals valeurs. 


nodeValue 


Valeur du nceud. Elle varie suivant le nceud. Pour un attribut, equivalent de la 
propriete val ue ; pour un texte, un commentaire ou une section CDATA 
(eh bien... le texte !) ; pour la plupart des autres types, null. 


attributes 


On se demande ce que cette propriete fait la plutot que dans I'interface 
El ement, puisqu'elle n'est definie que pour les noeuds de type element ! 
II s'agit d'un tableau a valeurs nominees (interface NamedNodeMap, vue plus 
bas) fournissant tous les attributs de I'element. On ne s'en sert que pour lister les 
attributs dynamiquement : pour un attribut precis, on utilisera getAttri bute 
et setAttribute, definis dans I'interface Element, et bien plus pratiques. 



Les principales constantes pour les types de noeud sont (valeur et nom) : 

1 Node.ELEMENT_NODE 

2 Node.ATTRIBUTE_NODE 

3 Node.TEXT_NODE 

Voyons a present les proprietes qui permettent de se deplacer dans le DOM, tache 
absolument critique pour la plupart des scripts. 

Tableau 3-4 Proprietes de parcours du DOM de Node 



Propriete Description 


parentNode 


Le nceud pere dans I'arborescence. II aura pour valeur null si le noeud vient 
d'etre cree ou s'il s'agit du noeud Document, tout en haut de I'arborescence, 
d'un attribut ou de quelques autres types esoteriques. Dans le cas contraire, 
indique le noeud parent, ou conteneur, du noeud courant. Par exemple, le noeud 
pere de ti tl e est normalement head, celui de head est html , 
celui de html est #document et la chame s'arrete la. 


childNodes, 
firstChild, 
lastChild 


En descente maintenant : ces proprietes permettent d'acceder aux nceuds fils du 
nceud courant. Un element vide (<bal i se ... />) n'aura pas de nceuds fils, 
pas plus qu'un attribut, un commentaire ou une instruction. Dans un tel cas, 
childNodes renverra une liste vide (0 == childNodes. length), et 
fi rstChild comme lastChild renverront null. Sinon, la liste n'est pas 
vide, fi rstChild renvoie le premier noeud fils et lastChild le dernier noeud 
fils. S'il n'y a qu'un nceud fils, on a done fi rstChild == lastChild! 


previ ousSi bl i ng, Renvoient les noeuds freres precedent et suivant, respectivement. Un nceud frere 
nextSi bl i ng est un nceud ayant le meme nceud parent que le nceud courant, done figurant au 

meme niveau dans le document. Les notions de precedent et suivant respectent 

I'ordre du document. 
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Pour bien fixer les idees, voici un petit fragment de XHTML et quelques resultats 
d'expressions. On utilisera dans le code source JavaScript des variables nominees 
d'apres les attributs i d du source XHTML (ce qui ne se fait pas tout seul : on suppo- 
sera qu'on a correctement defini ces variables auparavant). 



<hl id="header">Personnes inscrites</hl> 

<ul id="people"> 

<li id="al">Alexis</li> 
<li id="nioute">Anne-Julie</li> 
<1 i i d="el odi e">El odi e</~\ i > 
<li id="mimi">Marie-Helene</li> 
<1 i i d=" xavi e r ">Xavi e r</~\ i > 

</ul> 

On a alors : 



header . nextSibling.nodeType == Node.TEXT_NODE // Surprise ! 

header . nextSibling.nextSibling == people 

nioute.lastChild == nioute.fi rstChi Id 

elodie.nextSibling == mimi 

people. previousSibling == header 

header .childNodes .length == 1 

header.fi rstChild.nodeType == Node.TEXT_NODE 

// Ci-dessous : 6 noeuds texte entrelaces a 5 elements 

people. childNodes .length == 11 

people.fi rstChild.nodeType == '#text'// Surprise ! 

people.fi rstChi Id. nodeValue == ' '// En mode HTML en tout cas 

elodie.fi rstChi Id. nodeName == '#text' 

xavier .lastChild. nodeValue == 'Xavier' 

xavier.parentNode.fi rstChi Id. nextSibling == al 

// Ci-dessous, valide en mode HTML. En mode XML, serai t 'hi' 

nioute.parentNode.previousSibling. nodeName == 'HI' 

On a souvent tendance a oublier ces maudits nceuds texte un peu partout, dus a 
l'indentation, aux retours a la ligne... Avec un peu d'habitude, on finit par s'y habi- 
tuer, et arreter de voir surgir des erreurs JavaScript du type « pas de propriete xxx 
pour le noeud ». Et surtout, avec les methodes etendues de l'objet Element dans Pro- 
totype (que nous etudierons au chapitre 4), on se deplace beaucoup plus simplement 
et efficacement ! 

Certains ecrivent rapidement des fonctions du style fi rstElementChild, 
lastElementChild, previousElementSibling et nextElementSibling, pour eviter 
d'avoir a penser a cela, mais il s'agit a mon sens d'une fausse bonne idee. En effet, le 
simple fait d'utiliser nos fonctions propres plutot que les fonctions natives du DOM 
nous amene a penser au probleme ! Qui plus est, cela cree une dependance plutot 
superflue a nos quatre petites fonctions, que nous devrons d'ailleurs utiliser comme 
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des fonctions classiques (x = firstElementChild(node)) plutot que comme des 
proprietes (x = node.fi rstChi Id). Le jeu n'en vaut pas la chandelle. Pour les 
besoins complexes de parcours, on utilisera simplement des mecanismes plus avarices 
que ces proprietes. 

Apres avoir passe en revue les proprietes, examinons les methodes de Node, qui sont 
tres frequemment utilisees, puisqu'elles constituent le seul moyen d'alterer le DOM 
en ajoutant, deplacant ou retirant des noeuds. 

Tableau 3-5 Principales methodes de Node 



Methode Description 


appendChild(newChild) Ajoute le nceud newChild en derniere position a I'interieurdu noeudcourant 

(newChild devient automatiquement le lastChild). Astuce : si 
newChi 1 d etait deja present dans le DOM, il est automatiquement retire 
d'abord. Un deplacement se fait done en un seul appel de methode. 


cloneNode(deep) 


Cree un clone du nceud courant, sans I'attacher au DOM. Le parametre deep 
est un booleen indiquant s'il s'agit d'une copie profonde (incluant tous les 
nceuds fils, done une copie de I'arbre dont le nceud courant est racine) ou 
d'une copie superficielle (juste le nceud courant, sans ses nceuds fils). Ce 
dernier cas est tres rare, on fait done generalement un cloneNode(true). 
En somme, e'est un peu la meme chose qu'un constructeur copie. 


hasAttributesO 


Indique si le nceud (qui doit etre un element) a des attributs. Methode intro- 
duce au niveau 2, et coherente avec la presence de la collection 
attributes. Equivalent propre de != attributes, length. 


hasChildNodesO 


Permet de savoir si le nceud a des nceuds fils. Equivalent propre de 
!= childNodes .length. 


insertBefore(new, ref) 


Insere un nceud fils a une position bien determined. Le nceud a inserer est 
passe en premier (new), le nceud de reference en second. Comme le nom 
de la methode I'indique, new sera positionne avant ref. Ainsi, pour inserer n 
comme premier fils de p : p.insertBefore(n, p.fi rstChild). 
Notez que I'insertion peut avoir lieu meme quand p n'a pas encore de nceud 
fils, car p.insertBefore(n, null) est equivalent a 
p.appendChild(n). Comme pour appendChild, si new etait deja 
present dans le DOM, il est automatiquement retire d'abord. 


removeChi ld(old) 


Retire le nceud fils ol d du DOM. C'est le seul moyen de retirer un nceud : 
on n'a pas de methode remove ou delete qui supprime le nceud sur 
lequel elle est invoquee : il faut demander a son nceud parent (attention a ne 
pas passer null). Notez bien que je dis retirer, pas detruire. Le nceud existe 
toujours en memoire, vous pouvez garder une reference dessus. Je rappelle que 
JavaScript n'a pas de destructeurs d'objets, vu qu'il s'agit d'un langage 
« a ramasse-miettes » {garbage collector). 


replaceChild(new, old) 


Remplace le nceud fils ol d par le nceud new. Renvoie ol d. Comme pour 
appendChild et insertBefore, si new etait deja present dans le DOM, 
il est automatiquement retire d'abord. 
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Petite precision, evidente a 1'utilisation, mais sait-on jamais : tous les ajouts, retraits 
et remplacements concernent le nceud (new ou old) et ses nceuds fils, c'est-a-dire le 
nceud en tant que fragment de document. 

Avant de pouvoir manipuler ces methodes dans des exemples, nous allons devoir 
explorer l'interface Document, qui nous permettra de mettre la main sur des elements 
existants (pour les deplacer, les modifier ou les retirer du DOM), et d'en creer de 
nouveaux pour les ajouter au DOM. 

Notons enfin que le DOM niveau 3 a rajoute quelques methodes et proprietes de 
confort a l'interface Node, en particulier isSameNode, isEqualNode, getUserData, 
setUserData et textContent. II s'agit ici surtout de raccourcir le code necessaire a 
quelques taches courantes. 



Document 



C'est l'autre interface incontournable, quoi que vous vouliez faire avec le DOM. 
C'est grace a elle qu'on accede au document, comme son nom l'indique. Elle est la 
plupart du temps fournie par un objet JavaScript appele document. Cet objet a 
d'ailleurs la bonne idee d'implementer aussi l'interface DOMImpl ementati on, que nous 
verrons plus loin. En somme, tout fragment de script DOM utilise document. 

Void les principales proprietes et methodes. 



Tableau 3- 


5 Principales proprietes et methodes de Document 


Propriete/methode Description 


documentEl ement 


L'element (interface El ement) racine du document. Dans un document 
(X)HTML, c'est l'element html . Pratique pour realiser un parcours manuel en 
partant de la racine. 


c reateEl ement (tagName) 


Le seul et unique moyen de creer un element en JavaScript, done d'enrichir 

ensuite le document. On passe le nom de la balise en argument. Je conseille 

les minuscules, qui fonctionneront aussi sur un document 100 % XML, alors 

que la forme canonique (majuscule) echouerait Renvoie le nceud fraichement 

cree (interface Element). 

Attention : de nombreux exemples en ligne passent un fragment HTML 

complet, du style document, create El ement ('<div 

i d=" test">Bon j ou r</di v> ' ) ; . C'est une extension partielle de MSIE, 

ce qui ne fait absolument pas partie du standard. 


createTextNode(data) Le seul moyen de creer un nceud texte, ['autre grand type de noeud dans une 

page web. On passe le texte du nceud en argument. Nous renvoie le nceud 
texte (interface Text) ainsi construit. 
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Tableau 3-6 Principales proprietes et methodes de Document (suite) 





getEl ementsByTagName (tag) 


Tres pratique, permet de recuperer une liste (interface NodeLi st) de tous les 
elements, dans I'ordre du document (parcours en profondeur, de haut en bas), 
ayant passe le nom en argument. La aussi, on est sensible a la casse lorsqu'on 
est en mode XML. Par exemple, pour recuperer tous les elements tab! e 
d'une page, on utilisera 

document . get El ementsByTagName ( ' tab! e ' ) . La valeur speciale 
* est parfois utile et permet de recuperer tous les elements du document. 


getElementByld(id) 


Recherche dans tout le document le nceud dont I'lD (attribut i d) est fourni. 
Renvoie I'element (interface Element) en cas de succes, nul 1 sinon. 
C'est la methode incontournable. Inutile d'esperer faire un script utile sans 
elle. Pour beaucoup, ne pas en disposer revient a ne pas disposer du 
DOM, et par extension, tester qu'on a le DOM revient a tester, en fait, qu'on a 
au moins le niveau 2. 



Deux mots sur les methodes createXxx. D'abord, les noeuds sont bien crees en 
memoire et nous sont renvoyes pour manipulation ulterieure, mais ils ne figurent pas 
encore dans le DOM, ils ne sont rattaches a aucune portion existante du document. 
II nous appartient de les inserer a l'endroit qui nous interesse, avec les methodes de 
l'interface Node. Ensuite, pour createElement, si le type d'element indique prevoit 
des valeurs par defaut a ses attributs, les noeuds Attr correspondants sont automati- 
quement crees et ajoutes a sa liste attri butes. 

On trouve egalement les variantes a suffixe NS de nombreuses methodes, qui pren- 
nent en charge un parametre supplemental indiquant un espace de noms. On est 
alors clairement en XHTML, car il s'agit d'une fonction importante heritee du 
XML, qui permet de faire cohabiter plusieurs vocabulaires dans un meme document 
(par exemple, pour utiliser des balises MathML ou SVG). 

Le niveau 3 a ajoute quelques methodes bien utiles, comme adoptNode, 
normal izeDocument et renameNode, qui facilitent des taches assez frequentes mais 
auparavant un brin verbeuses a programmer. 

Void a present quelques exemples, pour se faire une premiere idee. 
Listing 3-2 Un script plutot indecis qui illustre beaucoup de choses 

// Creation d'un equivalent <hl>Bonjour</hl> 

var header = document. createElement('hl') ; 

header .appendChi Id (document. createTextNodeC Bonjour')) ; 

// Ajout au debut de <body> 

var body = document. getElementsByTagName('body') .item(O) ; 

body .i nsertBef ore (header, body.fi rstChild) ; 
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// Finalement plutot apres l'en-tete d'lD 'main'... 
var mainHdr = document. getElementByldC mai n ') ; 
mai nHdr . parentNode . i nsert Before (header , 
mainHdr. nextSibling) ; 

// Et puis carrement, en remplacement de l'en-tete ! 
mai nHdr. parentNode. replaceChi Id (mainHdr, header) ; 

// D'ailleurs, on ne dit jamais assez bonjour... x2 ! 

header .parentNode. in sertBef ore (header. cloneNode (true) , header) ; 

// En revanche, ceci donnerait un hi vide... 

header . cloneNode(false) ; 

// ... car on n'a pas clone le noeud texte fils de header ! 

Attention tout de meme a faire les choses plus directement dans votre code de 
production ! Le script ci-dessus se resumerait a ceci, s'il ne prenait pas tant de 
detours : 

Listing 3-3 La version minimale du script precedent 

var header = document. createElement('hl') ; 

header .appendChi Id (document. createTextNodeC Bonjour')) ; 

var mainHdr = document.getElementByld('main') ; 

mai nHdr. parentNode. replaceChi Id (mainHdr, header) ; 

header .parentNode. in sertBef ore (header. cloneNode (true) , header) ; 



Element 



L'interface El ement etend les capacites de Node pour les noeuds representant des ele- 
ments, c'est-a-dire des balises. Ces nceuds se distinguent principalement des autres 
en ce qu'ils peuvent avoir des attributs et des elements fils . 

Plutot que de devoir creer a la main des noeuds Attr et les gerer individuellement, en 
plus de les ajouter ou les retirer a la liste attri butes de 1' element, on dispose done de 
methodes dediees, qui facilitent le travail. On verra plus tard, avec le DOM HTML, 
que meme ces methodes sont peu utilisees : on passe generalement par des proprietes 
specifiques pour chaque attribut concret. Neanmoins, pour pouvoir realiser un traite- 
ment generique, il faut les connaitre. 



1. D'accord, Document peut aussi avoir des elements fils... Si on ne peut plus simplifier a bon escient... 
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Propriete/methode 

tagName 



Tableau 3-7 Proprietes et methodes principales de I'interface Element 
Description 



getAttribute(name) 



getEl ementsByTagName (tag) 



hasAttribute(name) 



removeAttribute(name) 



La seule propriete significative. Fournit le nom de la balise pour I'element. En 
mode HTML, utilise la forme canonique (majuscule), en mode XML et autres 
modes sensibles a la casse, utilise la casse employee a la creation. La propriete 
nodeName devient synonyme de celle-ci. 

Renvoie la valeur de I'attribut indique, ou la chame vide (' ') si I'attribut 
n'existe pas. Prend en compte une eventuelle valeur par defaut. 



Tiens ! On I'avait deja au niveau de Document, celle-ci. Mais justement : 
appelee sur un element, elle restreint son champ de recherche au fragment du 
document situe a I'interieur de cet element. Potentiellement beaucoup plus 
performant, et souvent plus utile que la version globale. 



Precise si I'attribut indique est present (ou dispose d'une valeur par defaut, ce qui 
revient au meme). Plutot utile, car getAttri bute ne distingue pas entre attri- 
but a valeur vide et attribut absent. 
Attention : n'est pas pris en charge par MSIE ! Utilisez alors plutot I'operateur in. 

Retire un attribut de I'element. Attention : si I'attribut de ce nom dispose d'une 
valeur par defaut, une nouvelle definition d'attribut avec cette valeur prend la 
place de la definition retiree. II n'est done pas possible de retirer une valeur par 
defaut. Si I'attribut n'existait pas, n'a aucun effet. 



En somme, rien de bien revolutionnaire par rapport a ce que Node permettait de faire, 
surtout dans la mesure ou, dans la majorite des codes concrets, on utilisera des pro- 
prietes specifiques, issues du DOM HTML, pour les attribute qui nous interessent. 



Text 



C'est le type des noeuds representant un fragment de texte. En simplifiant un peu (au 
mepris de quelques cas particuliers plutot rares), pour un document HTML, un 
fragment de texte demarre au premier caractere different de < apres une balise, et se 
termine au premier caractere <. II comporte done toute la mise en forme du code 
source HTML : retours chariot, indentation (par espaces ou tabulations), etc. C'est 
pourquoi on a tant de noeuds texte « inutiles » au milieu de nos arbres DOM. 

Techniquement, I'interface n'herite pas immediatement de Node : elle derive de 
CharacterData, qui elle derive de Node. On dispose done des methodes 
de CharacterData, qui permettent de modifier la valeur in situ, en inserant du texte 
au milieu de l'existant, en en supprimant ou remplacant une portion, voire en 
remplacant tout. 

Ces methodes, appendData, insertData, deleteData et replaceData, sont assez 
rarement utilisees, car elles vont au-dela des besoins courants. Meme la propriete 
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officielle pour le texte (data), nest pratiquement jamais utilisee nommement, la pro- 
priete generique nodeVal ue etant ici synonyme. 

En revanche, on utilise trop peu la propriete length, qui contient la taille pre- 
calculee du contenu texte. On passe trop souvent par la methode length () des objets 
String. Ainsi : 

header.fi rstChi Id. length 

est equivalente, mais potentiellement plus efficace (au niveau de la milli-seconde, 
entendons-nous bien...) que : 



\ header.fi rstChild.nodeValue. length Q 



Les quelques methodes restantes, splitText, et les nouveautes de niveau 3, 
wholeText et replaceWholeText, correspondent a des usages pour l'instant si rares 
qu'on ne fera pas plus que les mentionner. 

NodeList et NamedNodeMap 

Ce sont les deux principales interfaces pour manipuler des collections, c'est-a-dire, 
pour simplifier des listes de noeuds. La difference entre les deux est que NodeList 
utilise uniquement des positions (l er element, 4 e element...) tandis que 
NamedNodeMap associe un nom a chaque nceud. 

NodeList est tres frequemment utilisee, car c'est le type de childNodes et le type de 
retour de getElementsByTagName. Sa definition est triviale. 





Tableau 3-8 Propriete et methode de I'interface NodeList 




item(index) 


Accede au nceud (interface Node) concerne. II peut s'agir de n'importe quel type de 
nceud, bien entendu. Le premier nceud est en position (zero), le dernier en posi- 
tion 1 ength - 1. Toute position superieure ou egale a 1 ength renverra null. 


length 


Taille de la liste. 



Attention! Certains scripts utilisent la notation maListe [index] au lieu de 
maLi ste . i tem(i ndex) . Cela ne fait pas partie du standard et n'est done pas portable. 

NamedNodeMap est principalement utilisee comme type de la propriete attributes. 
On ne s'en sert done que dans le cadre de traitements generiques. Sa definition est 
des plus simples, elle aussi . 
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Tableau 3-9 Principales proprietes et methodes de I'interface NamedNodeMap 



Propriete/Methode 

getNamedl tern (name) 



Description 

Renvoie le noeud associe au nom passe, ou null si aucun noeud n'est associe 



a name. 



item (index) 



Accede au nceud (interface Node) concerne. II peut s'agir de n'importe quel 
type de nceud, bien entendu. Le premier nceud est en position (zero), le dernier 
en position length - 1. Toute position superieureou egale a length 
renverra null. 



length 



Taille de la liste. 



removeNamedl tern (name) 



setNamedl tern (node) 



Retire I'association basee sur le nom passe. Dans la mesure ou NamedNodeMap 
n'est utilisee que pour attributes, le fonctionnement estsimilaire a celui 
de removeAttri bute : si une valeur par defaut est definie, un nouveau nceud 
avec cette valeur est cree en remplacement du nceud retire. Attention toutefois en 
cas de nom inexistant (pas d'association) : leve une exception 
NOT_FOUND_ERR. 



Stocke le nceud comme valeur associee a node . nodeName. On evite done 
d'y stacker plusieurs nceuds texte, par exemple, puisqu'ils ont tous le meme nom 
(#text). Ceci dit, encore une fois, les seules NamedNodeMaps qu'on emploie 
en general sont les proprietes attributeset on les utilise principalement en 
consultation. Si on devait les modifier, on passerait des nceuds Attr, qu'on ne 
detaille pas ici. 



A titre d'exemple, void une petite fonction qui obtient en quelque sorte le i nnerText 
d'un nceud (element ou texte), en concatenant recursivement les valeurs de tous ses 
noeuds texte internes. 

Listing 3-4 Un exemple de parcours du DOM et d'utilisation de NodeList 

function getlnnerText(node) { 
var result = ' ' ; 
if (Node.TEXT_NODE == node. nodeType) 

return node. nodeValue; 
if (Node.ELEMENT_NODE != node. nodeType) 

return ' ' ; 
for (var index = 0; index < node. childNodes. length; ++index) 

result += getInnerText(node. childNodes. item(index)) ; 
return result; 
} // getlnnerText 

Attention, pour que cet exemple fonctionne sur MSIE, il faudra definir Node et ses 
constantes. Vous trouverez dans l'archive des codes source pour cet ouvrage (dispo- 
nible sur le site des editions Eyrolles) une demonstration complete de cette fonction. 
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DOMImplementation 

Cette interface, accessible par la propriete implementation de l'objet global 
document, represente l'etat de la prise en charge du DOM par le navigateur. Elle est 
utile pour verifier qu'une fonctionnalite DOM est presente ou non. 

De nombreux exemples et didacticiels sur Internet testent plutot qu'une fonctionna- 
lite est presente en verifiant si une fonction specifique existe. Par exemple, pour veri- 
fier qu'on dispose du DOM niveau 2, de nombreux scripts ecrivent : 

if (document .getElementByld && document .createTextNode) 

Ce n'est pas mal, mais cela n'est pas toujours possible pour toutes les fonctionnalites 
susceptibles de nous interesser. La facon generique de proceder consiste a utiliser la 
methode has Feature de cette interface, la seule qui nous interesse. Cette methode 
prend deux arguments : le nom officiel de la fonctionnalite et le niveau de DOM sou- 
haite (une fonctionnalite pouvant evoluer d'un niveau a 1' autre). L' argument de niveau 
peut valoir la chaine vide ( ' ' ) voire null, auquel cas il n'est pas pris en compte. 

Les fonctionnalites sont definies de facon dispersee dans les specifications du DOM 
et evoluent a chaque niveau. Elles correspondent principalement a des modules, et 
on trouve de-ci de-la dans la specification une mention comme « Une application 
DOM peut utiliser la methode DOMImplementati on. hasFeatu re (feature, 
version) avec comme arguments "XML" et "3.0" (respectivement) pour determiner 
si ce module est supporte ou non par l'implementation. » 

Ainsi, pour verifier qu'on a le niveau 2, on peut ecrire : 
if (document .implementation. has Feature ('Co re' , '2.0')) 

D'accord, ce n'est pas plus court, mais primo, c'est valable pour tout test de fonctionnalite, 
et secundo, c'est tout de meme plus lisible qu'une serie de tests d'existence de methodes. 

Vous l'avez compris le parametre versi on peut valoir null, '','1.0', '2.0' ou '3.0'. 
Les valeurs utiles pour le parametre feature incluent. 

Tableau 3-10 Identifiants de fonctionnalites pour hasFeature 



Fonctionnalite Description 


AS-READ, AS-EDIT, LS-AS Sous-modules de Abstract Schemas (version 3.0). 


Core Fonctionnalites noyau (versions 2.0 ou 3.0, la 1 .0 est garantie...). 


CSS 


Sous-module de style (version 2.0). 


Events 


Gestion evenementielle (versions 2.0 ou 3.0). 


HTML 


Module HTML (versions 1 .0 et 2.0). 
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Tableau 3-10 Identifiants de fonctionnalites pour hasFeature (suite) 



Fonctionnalite Description 


LS, LS-Async 


Sous-modules de Load and Save (version 3.0). 


Range 


Sous-module de Traversal and Range (version 3.0). 


Stylesheets 


Sous-module de style (version 2.0). 


Traversal 


Sous-module de Traversal and Range (version 3.0). 


Validation 


Validation de conformite aux grammaires (version 3.0). 


Vi ews 


Manipulation des representations visuelles (version 2.0). 


ViewsAnd Formatting, 
VisualViewsAndFormatting 


Sous-modules d'extension de Views (version 3.0). 


XML 


Extensions XML (version 3.0). 


XPath 


Prise en charge de XPath (et souvent de XSLT; version 3.0). 



HTMLDocument 



Nous entrons maintenant dans l'univers merveilleux du DOM HTML. Pourquoi 
merveilleux ? Parce qu'il va considerablement nous simplifier l'acces aux attributs 
HTML, pour commencer. Comme je l'ai deja signale, nous n'utiliserons pratique- 
ment jamais attributes, ni meme getAttribute ou setAttribute ! Le DOM 
HTML definit une interface specifique pour chaque balise HTML officielle, avec 
des proprietes pour chaque attribut, et aussi des methodes dediees. C'est une mine 
d'or pour vos scripts, aussi ajoutez des a present la specification a vos marque-pages : 

http://www.w3.org/TR/2003/REC-DOM-Level-2-HTIVIL-20030109/html.html 

Vous noterez que le DOM niveau 3 n'a pas touche au module HTML. On a done ici 
une specification stable, qui a subi pas moins de cinq revisions mais est solidifiee 
depuis pres de quatre ans. II nest pas etonnant quelle soit bien prise en charge par la 
majorite des navigateurs. 

Mais nous verrons quelques exemples de cela plutot avec l'interface suivante, 
HTMLElement. Pour l'instant, examinons HTMLDocument, la specialisation de Document 
dans le contexte des pages web. 

Au risque d'en choquer certains, j'affirme pour commencer que HTMLDocument 
n'ajoute rien de veritablement utile a Document. Sur les 11 proprietes et 5 methodes, 
je ne trouve une reelle utilite qu'aux proprietes title et body. C'est tout. Permettez- 
moi tout de meme de justifier cette opinion : 

• ref errer est bien plus utile cote serveur ; cote client, elle houvre la voie qua des 
manipulations tordues de l'historique ou a du tracking de navigation de l'utilisa- 
teur, deux utilisations un peu douteuses... 
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• domain et URL me semblent inutiles la majorite du temps : avez-vous besoin qu'on 
vous dise sur quelle page vous etes ? Et domai n est trop souvent utilise pour con- 
tourner le modele de securite de JavaScript. 

• Les collections images, applets, links, forms et anchors reviennenta de simples 
appels a getElementsByTagName (ou peu s'en faut). 

• cookie, comme referrer, devrait plutot etre traite par la couche serveur, sans 
parler de la complexity inutile de sa manipulation en texte. 

• openO, closeO, write(...) et writeln(...) appartiennent au cretace du Web et 
ne devraient jamais etre utilisees maintenant qu'on a le DOM et, souvent, 
innerHTML. 

• getElementsByName a perdu 99 % de son interet avec XHTML ; elle est avanta- 
geusement remplacee par un ou plusieurs appels cibles a getElementByld. 

Voila ! Du coup, il ne nous reste que deux proprietes qui me semblent utiles dans des 
scripts modernes. 



Propriete 

body 



Tableau 3-11 Les deux proprietes vraiment utiles de HTMLDocument 

Descriptioi 

Reference directe sur I'element <body> du document. II est frequent d'avoir besoin de cet 
element (pour parcourir son contenu ou ajouter un fragment en debut ou fin de document), 
ce qui nous economise un getElementsByTagNameC body') .item(O), cequi 
n'est pas rien... 



title Le titre de la page, en lecture/ecriture. De nombreux scripts ajustent le titre pour refleter un 

etat, ce qui permet de le signifier partout ou le systeme d'exploitation reprend ce titre : 
barre de titre de la fenetre, titre du bouton dans la barre des taches, etc. 



Si vous examinez l'interface HTMLDocument dans la specification, vous remarquerez 
que les proprietes collections utilisent comme type HTMLCollection plutot que 
NodeList. L'utilisation est strictement compatible (propriete length et methode 
item, si si), mais HTMLCollection a en plus une methode namedltem, qui prend un 
ID d'element et renvoie I'element dans la collection dont l'attribut i d a cette valeur, 
ou null en cas d'echec. Une sorte de getElementByld localise. 



HTMLElement 



Enfin, voici l'interface qui specialise Element pour les elements de pages web. Elle est 
elle-meme specialised par une interface pour chaque balise HTML officielle : on 
trouve par exemple des interfaces HTMLFormElement, HTMLInputElement, 
HTMLHeadingElement, etc. Prenez le temps d'aller les decouvrir dans la specification, 
pour utiliser leurs nombreuses proprietes dediees, qui simplifient grandement le code. 
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L'interface HTMLElement definit simplement cinq proprieties communes, qui corres- 
pondent a ce que la DTD de HTML appelle les « attributs noyau ». Voici ces cinq 
proprietes, dont on se sert tout le temps : 

Tableau 3-12 Proprietes communes a tous les elements HTML 



Propriete Description 


className 


Equivalent de I'attribut HTML cl ass. Ne peut s'appeler cl ass, parce que ce dernier est 
un mot reserve en JavaScript. Contient done un ou plusieurs noms de classes, separes par 
des espaces. 


di r 


Equivalent de I'attribut HTML di r. Peu utilisee dans des pages a langue unique, ou en tout 
cas ne melangeant pas langues occidentales et orientales : indique la direction (de gauche a 
droite ou de droite a gauche) du texte dans I'element. 


id 


Ai-je vraiment besoin de vous expliquer celle-ci ? Je rappelle qu'un ID est unique dans tout 
le document. 


Tang 


Equivalent de I'attribut HTML 1 ang. Specifie done la langue du texte contenu, via un code 
RFC1766(comme. fr-FR). 


title 


Equivalent de I'attribut HTML ti tie. Fournit done le texte alternatif de I'element, qui 
apparait generalement dans une infobulle lorsqu'on laisse le curseur de la souris un bref 
moment sur I'element 



Eh bien voila ! Nous avons vu l'essentiel des interfaces du DOM et du DOM 
HTML. Le reste est a examiner dans la specification (encore une fois, si le format de 
cette derniere vous egare, jetez done d'abord un oeil a l'annexe C). 

Nous realiserons quelques exemples concrets et parfois copieux plus loin dans ce 
chapitre, axes autour de besoins frequents. 



Quelques bonnes habitudes 

Lorsqu'on travaille avec le DOM, e'est comme pour tout : il y a quelques bonnes 
facons de faire et beaucoup de mauvaises. Les conseils de cette section devraient deja 
vous eviter une bonne partie des ecueils et problemes de maintenance. 



Detecter le niveau de DOM disponible 

Comme on l'a vu en parlant de l'interface DOMImplementation, de nombreux scripts 
detectent qu'ils disposent du DOM niveau 2 avec un code du style : 

if (document .getElementByld && document .createTextNode) 



Dormer vie aux pages 

Premiere partie 

En effet, vous remarquez qu'on n'a pas ajoute les parentheses d'appel derriere les 
noms des methodes : on recupere done juste les objets Function correspondants. Si 
ces methodes existent, ces objets seront differents de null, et done, traites comme 
des booleens, equivalents a true. La condition sera done validee. 

Vous vous demandez peut-etre pourquoi on teste deux methodes, alors que 
getElementByld suffirait (elle a ete introduite au niveau 2). C'est parce que certains 
navigateurs, dans d'anciennes versions, ne fournissaient qu'une prise en charge tres 
partielle du DOM niveau 2, qui proposait generalement getElementByld en raison 
de son immense popularite, mais plus rarement des fonctions comme 
createTextNode. II s'agit done d'une tentative vague de protection contre une prise 
en charge trop partielle. 

C'est generalement fiable, mais ce n'est pas forcement extensible a tous les besoins. II 
peut arriver qu'un module DOM, a un niveau precis, n'introduise aucune nouvelle 
propriete ou methode (il peut se contenter de modifier le comportement de 
methodes ou proprietes, en ajoutant des cas d'erreur, en limitant leurs resultats, ou en 
activant la sensibilite a la casse par exemple). Que faire alors ? 

On l'a vu, la solution reside dans l'emploi de la methode hasFeature de 
DOMImplementation. Comment recuperer un objet proposant cette interface ? C'est 
tres simple : une implementation conforme de Document doit fournir une propriete 
implementation, qui sert precisement a cela. Quant a l'interface Document, on a vu 
quelle etait proposee par l'objet global JavaScript document. Et cela fonctionne en 
effet sur tous les principaux navigateurs. 

Pour detecter un niveau general de DOM, on utilisera la fonctionnalite Core. On 
ecrira done pour detecter le support de DOM niveau 2 ou ulterieur : 

if (document .implementation. has Feature ('Core' , '2.0')) 

Pour detecter la prise en charge de DOM niveau 3 XPath : 
if (document .implementation. has Feature ('XPath' , '3.0')) 

C'est simple, et surtout lisible et explicite ! 

Creer les noeuds dans le bon ordre 

Lorsqu'on cree un fragment DOM, e'est-a-dire une serie de nceuds qu'on va imbri- 
quer les uns dans les autres (ce qui peut etre aussi bete qu'un element avec un texte a 
l'interieur !), on doit garder deux considerations a l'esprit : 
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• Intuitivement, les elements doivent etre crees de l'exterieur vers l'interieur : on va 
creer 1' element avant de creer le noeud texte a placer dedans, par exemple. On va 
creer la liste avant de creer ses elements, etc. 

• En revanche, chaque fois qu'un nceud est ajoute dans un autre, et que ce nceud 
conteneur est attache au DOM, le navigateur est susceptible de declencher 
immediatement un reflow, c'est-a-dire une mise a jour de l'affichage. Cette mise a 
jour entrainera peut-etre des decalages tous azimuts. Par exemple, lorsqu'une 
ligne devient plus longue que la largeur disponible, le paragraphe auquel elle 
appartient occupe tout a coup une ligne supplemental, ce qui decale le reste... 

II est bon de suivre le premier point et de creer les elements de l'exterieur vers l'inte- 
rieur. En revanche, pour composer les elements ensemble, generalement a coup 
d'appels a appendChild, plus rarement a insertBefore, il est preferable d'attendre 
que le fragment soit complet pour ajouter 1' element racine du fragment (1' element 
externe, si vous preferez) au DOM de la page. 

De cette facon, on ne causera qu'un seul reflow, evitant ainsi d'eventuels impacts 
visuels disgracieux au fil de la construction du fragment. Qui plus est, plusieurs 
reflows auraient un impact negatif sur la vitesse d'execution du script. En les evitant, 
on gagne done tant visuellement qu'en rapidite ! 

Ne scripter qu'apres que le DOM voulu soit construit 

On touche ici a une source commune d'erreur chez les debutants qui scriptent le 
DOM. II existe une regie simple, et meme evidente : tant que le navigateur n'a pas lu 
et interprete un fragment donne de votre HTML, celui-ci n'est pas present dans le 
DOM de la page. 

Corollaire necessaire : un script situe avant un element dans le source HTML ne 
pourra pas immediatement acceder a cet element via le DOM. Dans la mesure ou la 
salutaire separation du contenu et du comportement impose d'utiliser uniquement 
des scripts externes, lies a la page a l'aide d'une balise du type : 

<scri pt type="text/j avascri pt" src="chemi n/f i chi er . j s"x/scri pt> 

et que ces balises sont par convention placees dans 1' element <head>, situe avant l'ele- 
ment <body>, on a done virtuellement la garantie que nos scripts seront analyses 
avant qu'il existe le moindre DOM pour le corps du document. 

Par consequent, un script qui contiendrait au niveau racine (c'est-a-dire hors de toute 
fonction) un code du style : 

var header = document. getElementByld('main-title') ; 
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est voue a l'echec : le HTML correspondant, probablement quelque chose du style 
<hl id="main-title">...</hl>, n'a pas encore ete traite a ce moment-la. Le naviga- 
teur traite en effet votre script au moment ou il le charge, c'est-a-dire en traitant 
1' element <script> qui l'invoque. 

La solution est simple : faire une fonction pour votre code d'initialisation, et 
demander au navigateur d'appeler cette fonction une fois le DOM charge. Par defi- 
nition, a ce moment-la, l'ensemble du document aura ete charge, et sera done repre- 
sente dans le DOM. 

Idealement, il faut reagir des que le DOM est charge, ce qui survient bien avant que 
la page elle-meme ne le soit : entre les deux, le navigateur doit charger toutes les 
ressources de la page : CSS, images, applets, etc. Ce chargement complementaire est 
potentiellement tres long et cela peut retarder d'autant 1' execution de vos scripts 
d'initialisation. Helas, certains navigateurs ne fournissent un evenement que pour ce 
dernier chargement, le plus tardif. 

Ce chargement « portable » correspond a l'evenement onload de l'objet global 
wi ndow. Suivant ce que vous avez sous la main pour ecrire votre script, y attacher 
votre fonction sera plus ou moins complique. Nous verrons tout a l'heure les details 
de la gestion evenementielle, mais sachez que cela n'a rien de foncierement difficile. 
Si vous disposez de la bibliotheque Prototype par exemple (que nous verrons en 
detail au chapitre suivant), cela revient simplement a ecrire : 

I Event. observe(window, 'load', mylnitFunc, false); 

Si vous n'avez pas Prototype mais avez la garantie d'un navigateur conforme au stan- 
dard DOM niveau 2 evenements (ce qui n'est pas le cas de MSIE, deja...), e'est du 
meme ordre : 

I window. addEventLi stener('load' , mylnitFunc, false); 

Encore une fois, un peu de patience : nous verrons les details un peu plus tard dans 
ce chapitre. 

Pour ceux qui ont un besoin imperieux d'executer du script des le DOM charge, sans 
attendre le chargement de la page, il existe effectivement certains mecanismes, bien 
que rien encore ne soit veritablement standardise. Une solution portable, qui etend la 
bibliotheque Prototype, est detaillee ici : 
http://agileweb.org/articles/2006/07/28/onload-final-update. 
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Ne jamais utiliser d' extension proprietaire 

Le Web est rempli d'articles, didacticiels et demonstrations ecrits par des personnes 
qui n'ont pas forcement eu a coeur de s'en tenir aux standards. Souvent, « 5a a marche 
pour eux, done 9a doit marcher pour vous ». Le probleme, e'est que suite a la guerre 
des navigateurs des annees 1990, chaque navigateur a mis en place des dizaines 
d'extensions proprietaires un peu partout dans JavaScript et le DOM, alors au 
fameux niveau zero. 

Lorsque vous tombez sur un script qui semble resoudre votre probleme, commencez 
par verifier scrupuleusement que toute portion technique dont vous ne maitrisez pas 
le contenu (nom de propriete ou de methode inconnue, etc.) est en realite conforme 
aux specifications. II vous suffit de jeter un ceil au standard de JavaScript et aux 
specifications du DOM pour etre frxe(e). 

Bien sur, on n'a parfois pas le choix : ainsi, lorsqu'une fonction standard nest pas 
prise en charge par un navigateur, ni simulable en combinant d'autres fonctions stan- 
dards, il faut bien recourir a la fonction proprietaire equivalente. Mais ces cas sont 
assez rares et correspondent presque toujours a une implementation partielle ou 
incorrecte du DOM, generalement par MSIE. 

Evitez par exemple d'utiliser document. layers, la fonction CetObject, la classe 
ActiveXObject, les commentaires conditionnels, etc. Souvenez-vous : le Web sera 
standard, ou ne sera plus ! 

Utiliser un inspecteur DOM 

II est temps de parler des outils. Nous l'avons deja vu au chapitre 2, un bon outil 
d'aide au developpement peut vous faire economiser un temps precieux. Lorsqu'il 
s'agit par exemple de deboguer du JavaScript, on peut choisir de passer la journee a 
traquer un probleme subtil a coup de al ert, ou de recourir a un debogueur integre et 
de faire du pas a pas, pour trouver le souci en quelques minutes. 

Un inspecteur DOM sert a afficher tout ou partie du DOM d'un document, sous 
forme d'une arborescence depliable de nceuds. II est bien entendu tres utile pour 
mettre au point un script cense parcourir le DOM d'un document, puisqu'il evite de 
travailler a l'aveugle ou de recourir a une plethore d'appels a alert. 

L'inspecteur DOM de Firefox/Mozilla 

Nous avons vu au precedent chapitre le debogueur « officiel » de Mozilla, baptise 
Venkman. II est mis a disposition sous forme d'une extension. L'inspecteur DOM, 
en revanche, fait partie integrante du navigateur. Pour l'obtenir, il vous faut proceder 
differemment suivant votre plate-forme. 
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• Sous Windows (et, je crois, Mac OS X), il faut l'avoir installe explicitement, ce 
qui est a mon sens une betise de la part de la fondation Mozilla. Si vous n'aviez 
pas opte pour une installation personnalisee puis coche l'option, vous en etes 
quitte pour relancer Installation apres avoir ferme toutes vos fenetres Firefox. II 
vous faudra alors choisir le mode personnalise, et cocher lorsqu'on vous le propo- 
sera l'option Inspecteur DOM. Soyez tranquille, vous n'aurez pas de doublon dans 
la liste des programmes installes ou sur le disque, et vous conserverez tout votre 
profil d'utilisation. 

• Sous Linux, suivant votre distribution, il fera ou non partie du paquet f i ref ox. 
A vous de voir si vous disposez, dans le menu Outils, d'une option Inspecteur DOM. 
Dans la negative, recherchez le paquet idoine et installez-le apres avoir ferme tou- 
tes vos fenetres. Sur Debian par exemple, il s'appelle fi refox-dom-i inspector. 

Une fois disponible, l'inspecteur s'obtient depuis le menu Outils>lnspecteur DOM, ou 
en pressant Ctrl+Maj+I. II inspecte par defaut la page en cours, mais vous pouvez 
modifier ce comportement. Void son aspect general. 



Figure 3-2 

L'inspecteur DOM de Mozilla 
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Sur la gauche, vous avez le DOM de la page, depliable et navigable de facon clas- 
sique. Sur la droite, vous avez, au choix, l'objet DOM pur (choix par defaut) ou 
l'objet DOM JavaScript correspondant au noeud selectionne a gauche. 

La figure 3-.2 montre le DOM d'une page de resultats Google, avec un nceud selec- 
tionne qui propose plusieurs informations dans la vue DOM pur : le nom du noeud 
(ici sa balise canonique, puisqu'il s'agit d'un element dans un document en mode 
HTML), son type (1, done Node.ELEMENT_NODE), sa valeur (vide comme pour tout 
element) et ses attributs. 
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On a parfois moins de chance, par exemple sur des nceuds texte, ou tout ceci est rem- 
place par une vaste zone de texte, ce qui pour les nombreux noeuds texte vides nest 
pas d'une grande utilite. 

Prenons le panneau de droite. En haut a gauche de ce panneau, une icone permet, en 
cliquant dessus, d'afficher une liste deroulante, dans laquelle vous pouvez choisir 
l'option JavaScript Object. La liste qui s'affiche alors offre une vue bien plus detainee du 
noeud courant ; c'est pratique pour aller denicher l'information, mais cela peut aussi 
nous submerger. Par exemple, pour le meme noeud que dans la figure precedents, on 
obtient ici, apres avoir deroule le premier element de la liste, nomme « Sujet ». 



Figure 3-3 

La vue JavaScript Object 
pour le meme noeud 
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C'est sans surprise : on a l'ensemble des proprietes et methodes definies par la speci- 
fication du DOM. Vous avez peut-etre remarque qu'elles ne semblent pas etre triees 
dans l'ordre alphabetique. Elles sont plus ou moins exactement groupees par niveau, 
module, interface et enfin ordre de definition dans la specification. Ici, on a d'abord 
toutes celles de Node (nodeType, nodeName...), puis celles de Element (attributes, 
getAttribute, qui fait d'ailleurs exception ici en etant present plus tot), et plus bas, 
hors de la figure capturee ici, celles de HTMLElement (id, title...) et celles de 
HTMLMetaElement (content, httpEquiv). On trouve ensuite, les proprietes issues du 
module Sty! e et les ajouts effectues a Node par le DOM niveau 3. 

Void un rapide tour des menus et services fournis : 

• Le menu Fichier vous permet d'inspecter un autre document, soit en selectionnant 
une des fenetres ouvertes de votre navigateur, soit en precisant une nouvelle URL. 

• Le menu Rechercher permet de chercher dans le DOM par nom de noeud, valeur 
d'lD ou valeur pour un attribut precis. 
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• Le menu Afficher permet de restreindre les types de noeuds affiches (en omettant 
les noeuds vides, par exemple), mais aussi de choisir si la vue navigateur met en 
exergue l'element visuel selectionne dans l'arborescence DOM (comportement 
par defaut) ou non. En effet, par defaut, selectionner un element dans l'arbre du 
DOM qui est affiche dans la page produit un cadre clignotant l'espace d'une 
seconde autour de cet element, pour aider le developpeur a s'y reperer. 

L'inspecteur DOM de Firebug 

Au chapitre precedent, en plus de Venkman, nous avons aussi vu les capacites de 
debogage JavaScript de l'extension Firebug pour Firefox. Nous vous avions promis 
que vous n'aviez pas fini d'entendre parler de cette extension ; le moment est venu de 
tenir cette promesse une premiere fois. 

Firebug propose done un inspecteur, et meme plusieurs, accessibles en choisissant le 
bouton Inspect ou l'onglet Inspector : 

• Un inspecteur Source, qui affiche un arbre des elements avec leur representation 
HTML (et une coloration syntaxique, s'il vous plait !). Survoler un element du 
document le selectionne automatiquement. 

• Un inspecteur Style, qui permet d'afficher les styles, explicites (attributs style) ou 
complets (e'est-a-dire incluant les valeurs par defaut et celles provenant de regies 
CSS), pour l'element survole. La bascule se trouve dans le menu Options de la 
barre Firebug. 

• Un inspecteur Layout, qui affiche l'ensemble des proprietes relatives au position- 
nement pour l'element survole. Precieux quand on travaille sur du code a la 
script.aculo.us ! 

• Un inspecteur Events, qui affiche les evenements lorsqu'ils se declenchent. 

• Enfin, un inspecteur DOM, qui peut fonctionner en mode global (affiche tous les 
objets globaux de la page et les proprietes de l'objet courant, done wi ndow) ou en 
mode survol (affiche le DOM de l'objet survole). On bascule de l'un a l'autre avec 
le bouton Inspect de la barre Firebug. 

Les figures suivantes presentent quelques exemples d'aspect pour ces inspecteurs. 

Vous trouverez de nombreux exemples supplementaires (et impressionnants !) sur la 
page dediee du site officiel : http://joehewitt.com/software/firebug/screens.php. Cliquez 
sur les vignettes pour voir les captures d'ecran completes. 

Personnellement, j'utilise bien plus souvent l'inspecteur DOM de Firebug que celui 
de Firefox. Utilisez les deux quelques temps pour determiner celui qui vous semble le 
plus agreable. 
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Figure 3-4 

L'inspecteur Source avec le 
nceud title selectionne 
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Figure 3-5 

L'inspecteur Style au survol 
d'une image que son attribut 
style rend flottante 
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Figure 3-6 

L'inspecteur Style en mode 
« styles complets » sur une 
autre image 
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Figure 3-8 

L'inspecteur DOM 
en mode global 
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Repondre aux evenements 

Apres ces quelques conseils, abordons le dernier point technique du DOM que nous 
n'avons pas vu : les evenements. Sans gestion evenementielle, c'est bien simple : votre 
page est morte. C'est-a-dire, pour faire une lapalissade, quelle nest pas vivante. Elle 
ne reagit pas a la souris, au clavier, ni meme aux evenements internes ou bases sur des 
timers. La page est le bee dans l'eau. 

Nous avons deja evoque brievement la gestion evenementielle. Ce sujet se decoupe 
en deux grandes parties : 

1 Associer un gestionnaire (une fonction que nous avons ecrite) a un evenement 
precis pour un objet precis. 

2 Traiter cet evenement lorsqu'il survient. 

En raison de la fameuse guerre des navigateurs des annees 1990, on a vu fleurir plu- 
sieurs manieres totalement incompatibles entre elles de gerer des evenements. 
Google n'oubliant jamais, on trouve encore de tres nombreuses pages pronant l'une 
ou l'autre de ces methodes aujourd'hui obsoletes, que ce soit pour associer l'evene- 
ment a un objet ou pour traiter l'objet evenement lorsqu'il survient. 

Afin de vous aider a bien distinguer les principales approches et a comprendre en 
quoi toutes (sauf une !) posent probleme, nous allons les etudier tour a tour. II s'agit 
la de culture technique, car lorsque nous passerons a Prototype, au chapitre suivant, 
ces incompatibilites et ces details techniques seront masques. 

Les truands : les attributs d'evenement dans HTML 

Mais si, vous les avez deja vus : ce sont les attributs onxxx dans le HTML. Void 
quelques exemples courants : 

<body on"load="initPageO"> 

<form method="post" action="process. php" onsubmit="checkForm()"> 
<a href="#" one"! ick=" return popupWindowChelp.html ')">Aide</a> 
<di v one! i ck="doSomethi ng () "> 



Certains de ces exemples cumulent les tares en enfreignant plusieurs regies techni- 
ques et ethiques... Tous posent en tout cas trois problemes : 
1 lis representent une intrusion du comportement dans le contenu. 
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2 lis ne peuvent pas facilement associer plusieurs gestionnaires a un meme evene- 
ment pour un meme element. 

3 lis n'existent pas pour tous les evenements de tous les elements. 

En somme, c'est a bannir, ne serait-ce que pour la premiere raison. La separation 
stricte du contenu, de l'aspect et du comportement est un objectif permanent, une 
facon de travailler, un etat d'esprit. 

La brute : les proprietes d'evenement dans le DOM niveau 

« Tres bien, » pensez-vous, « je vais deporter ces affectations dans mon JavaScript, au 
sein d'une fonction d'initialisation appelee apres le chargement de la page, comme 
suggere plus haut dans ce chapitre ». 

L'idee est noble, et je vous en felicite avec un grand sourire, mais on peut tout de meme 
mal l'executer. Par exemple, vous pourriez tomber dans le travers frequent que voici : 

Listing 3-5 Une association tres imparfaite de gestionnaires d'evenements 

function initEventHandlersO { 

document .getElementByld('mainForm') .on submit = checkForm; 
document .getElementByld('helpPopupLink') .onclick = popupHelp; 

} // initEventHandlers 

window. onload = initEventHandlers; 

D'accord, vos gestionnaires d'evenements sont desormais associes aux elements dans 
le script, ce qui debarrasse votre HTML de tout attribut onxxx, n'y laissant plus que 
du contenu. II y a effectivement du progres. 

Mais imaginez qu' apres votre balise <script> chargeant ce fichier JavaScript, vous 
chargiez un script supplemental qui, lui aussi, a besoin de lancer une de ses fonc- 
tions au chargement. S'il precede de la meme facon : 



window. onload = mylnitFunction; 



Votre propre initialisation partira aux oubliettes ! 

On le voit, cette facon de proceder partage un inconvenient avec celle vue 
precedemment : il n'est pas possible d'associer plusieurs gestionnaires au meme eve- 
nement pour un meme element. Les bogues qui en resultent peuvent etre tres diffi- 
ciles a diagnostiquer correctement. 

Par ailleurs, la aussi, tous les evenements potentiels ne disposent pas toujours d'une 
propriete idoine. 
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Le bon : addEventListener 

Void enfin la bonne facon de faire, qui est d'ailleurs celle specifiee par le standard DOM 
Level 2 Events (www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001 1 1 3/events.html). 

Par definition, tout objet proposant l'interface Node constitue une cible d'evenements 
potentielle et propose done egalement l'interface EventTarget. Celle-ci fournit trois 
methodes, dont deux nous interessent particulierement. 

Tableau 3-13 Les deux methodes des de l'interface EventTarget 



Methode 


Description 


addEventListener(type, listener, useCapture) 


Ajoute (inscrit, si vous preferez) un 
gestionnaire d'evenement. 


removeEventListener(type, listener, useCapture) 


Retire (desinscrit) un gestionnaire 
d'evenement. 



Les deux methodes ont les memes arguments, ne renvoient rien et ne levent aucune 
exception. La ou les deux premiers arguments sont simples a comprendre, le troisieme 
est plus delicat. 

• type decrit l'evenement concerne : il s'agit d'un nom, generalement en minuscules, 
sans le prefrxe on. La specification precise la liste des evenements valides du 
niveau 2, ainsi que les anciens evenements du niveau 0, pour lesquels une compati- 
bilite est maintenue jusqu'a present. Un tableau est fourni plus bas. 

• 1 i stener reference simplement la fonction de traitement. 

• useCapture indique qu'on souhaite capturer l'evenement plutot que de l'intercep- 
ter lors de son bouillonnement. Ces notions un peu avancees sont presentees un 
peu plus loin dans ce chapitre. La plupart du temps, vous mettrez f al se. 

Dans la majorite des cas, on ne prend pas la peine de desinscrire son gestionnaire, car 
celui-ci est valide pendant toute la duree de vie de la page (et puis, lorsqu'on utilise 
Prototype, ils sont automatiquement desinscrits quand on quitte la page). On utilise 
done principalement addEventLi stener. Void la version propre du listing precedent. 

Listing 3-6 Une association de gestionnaires conforme aux standards 

function initEventHandlersO { 

document .get Element By Id ('main Form') .addEventLi stener ( 

'submit', checkForm, false); 
document . get El ementById( ' hel pPopupLi nk ' ) .addEventLi stener ( 

'click', popupHelp, false); 

} // initEventHandlers 

window. addEventListenerC'load' , initEventHandlers, false); 
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Vous remarquerez que ce n'est guere plus complique, ni moins lisible. Avant d'entrer 
dans les details sordides de la compatibilite avec MSIE et de cette histoire de capture 
et de bouillonnement, dressons une liste des principaux evenements reconnus, decrits 
a la section 1.6 de la specification : 



Categorie 



Tableau 3-14 Principaux evenements reconnus par le DOM niveau 2 
Type Description 



Ul DOMFocusIn 

(interface utilisateur) DO MFocusOut 



Souris 



Clavier 



Equivalent de I'ancien on Focus : I'element a recu le focus clavier. 
Equivalent de I'ancien onBlur : I'element a perdu le focus clavier. 



DOMActi vate L'element a ete active. La propriete detai 1 de I'objet Event 

indique alors s'il s'agit d'une activation simple (1 : die, touche Entree) ou 
double (2 : double-die, Maj+Entree). 



click 



mousedown 



mouseup 



mouseover 



mousemove 



mouseout 



Clic de souris (ou equivalent clavier) : enfoncement puis relachement d'un bouton. 
Enfoncement d'un bouton. 



Relachement d'un bouton. 



La souris commence a survoler I'element (« entree dans I'espace aerien »). 



La souris survole I'element. 



La souris vient de cesser de survoler I'element (« sortie de I'espace aerien »). 



Pas encore specifies, e'est ahurissant ! On se rabat pour I'instant sur les evenements niveau 0, 
a savoir keypress, keydown et keyup. 



Chaque type d'evenement utilise une version specialisee de Event pour passer les 
details au gestionnaire. Examinez la specification pour obtenir la liste des proprietes 
specifiques a chaque type. 

Les evenements compatibles DOM niveau sont pour le moment toujours 
autorises ; la specification les nomme « evenements HTML » ! En voici la liste. 

Tableau 3-15 Evenements de compatibilite avec le DOM niveau 



Type Description 


load 


Chargement termine du document, de I'objet ou du cadre. Sans equivalent de niveau 2. 


unload 


La fenetre ou le cadre va se fermer. A utiliser avec circonspection, peut s'averer irritant ! 
Sans equivalent non plus (et e'est tant mieux !). 


abort 


Interruption volontaire du chargement du document, de I'objet ou du cadre. 


error 


Une image n'a pu se charger ou une erreur est survenue dans un script. 


select 


Du texte a ete selectionne dans le champ de saisie. 


change 


La valeur du champ a change (declenche a sa perte de focus uniquement, sauf, souvent, 
pour les select). 


submit 


L'utilisateur demande a envoyer le formulaire. 
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Tableau 3-15 Evenements de compatibility avec le DOM niveau (suite) 

e Description 

reset Le formulaire est reinitialise (retour aux valeurs specifiees dans le HTML). 



focus 



blur 



Le champ ou libelle (1 abel , i nput, sel ect, textarea, button) vient de recuperer 
le focus clavier. 



Le champ ou libelle a perdu le focus clavier. 



resize La fenetre (ou en tout cas la vue contenant le document) est redimensionnee. 



scrol 1 La fenetre (...) subit un defilement. 

I lil: 



Evitez toutefois de les utiliser lorsqu'un equivalent de niveau 2 existe, ne serait-ce 
que pour la perennite de votre code... 

Accommoder MSIE 

Eh oui, on y revient toujours : alors que addEventListener, la methode officielle, 
dont la specification finale a deja 6 ans, est prise en charge par l'ensemble des naviga- 
teurs repandus, MSIE n'en a jamais entendu parler. Non ! Dans MSIE, mes chers 
lecteurs, on utilise attachEvent. D'ou cela sort-il ? De l'imagination feconde, 
quoique mal avisee, des developpeurs du siecle dernier (litteralement). Remarquez, le 
nom a du sens, c'est deja 9a. 

Cette methode est decrite sur http://msdn.microsoft.com/workshop/author/dhtml/ 
reference/methods/attachevent.asp, et si vous allez y jeter un oeil, vous verrez qu'en 
depit d'un certain culot consistant a nommer la liste proprietaire Microsoft des noms 
d'evenements une « liste des evenements DHTML standards », l'interface est simple : 
le nom d'evenement, et la fonction de gestion. Pas de troisieme argument en 
revanche, MSIE n'offrant pas de mecanisme de capture, mais uniquement le 
bouillonnement. Et les noms d'evenements standards (quel humour, ces redacteurs de 
documentation !) sont precedes du traditionnel prefrxe on, comme au bon vieux 
temps. 

La traduction est done simple : dans MSIE, au lieu de faire : 
node. addEventListenerC event ' , handler, false); 

On fait : 

I node.attachEvent('onevent' , handler); 

Pvien de bien sorcier, mais si on pouvait eviter de coder le i f/el se a chaque associa- 
tion, ce serait mieux. On va done ecrire une fonction specifique. 
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L'ideal, ce serait de la rendre disponible dans tous les objets, y compris tous les objets 
natifs du DOM, pour la manipuler de facon tres similaire a addEventListener, mais 
helas, c'est impossible : la plupart des objets natifs ne fournissent pas de prototype 
sur lequel greffer notre methode. II faut done se contenter d'une bete fonction, a 
l'ancienne. Voici un exemple d'implementation. 

Listing 3-7 Un exemple de fonction portable d'association de gestionnaire 

function addListener(element , baseName, handler) { 
if (element .addEventListener) 

element .addEventListener(baseName, handler, false); 
else if (element .attachEvent) 

element .attachEvent('on' + baseName, handler); 
} // addListener 

Notez que le cas restant (ni addEventListener, ni attachEvent) concerne si peu de 
navigateurs, tous un peu marginaux, qu'il ne merite pas qu'on s'y interesse, surtout 
qu'alors il n'est generalement pas possible de scripter la gestion evenementielle ! 

J'ai mis cette fonction a titre d'exemple, et pour vous faire comprendre la mecanique. 
Dans la pratique, des le prochain chapitre, on utilisera Event . observe, de Prototype, qui 
fait fondamentalement la meme chose (avec tout de meme plein de petits details autour). 

La propagation : capture ou bouillonnement ? 

Depuis tout a l'heure, vous lisez partout capture et bouillonnement. Si vous hetes pas 
habitue aux mecanismes de propagation d'evenements dans les navigateurs, ces termes 
vous sont etrangers (au moins un des deux). 

II s'agit des deux modes historiques d'interception des evenements. lis s'appliquent 
uniquement aux evenements de l'interface utilisateur et non aux evenements internes 
ou systemes, comme le declenchement d'un timer. 

II faut bien comprendre une chose : les evenements sont traites par le navigateur 
independamment de 1' existence de gestionnaires. Que vous ayez ou non defini des 
gestionnaires associes a un evenement, lorsque celui-ci survient, le navigateur cree 
toujours un objet pour le representer et notifie les elements concernes que l'evene- 
ment est survenu, en leur passant l'objet qui le represente. 

Dans les explications qui vont suivre, on se basera sur le document HTML 
d'exemple de la figure 3-8. 
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Listing 3-8 Un document HTML simple pour nos explications 

<html> 

<body> 

<div id="navbar"> 

<a id="homeLink" href="/home">Accueil</a> 

</div> 
</body> 
</html> 



Le modele le plus courant : le bouillonnement 

La plupart des evenements bouillonnent. Pas tous ceci dit, verifiez dans la specifica- 
tion au cas par cas (c'est precise pour chaque type d'evenement). Par exemple, les 
evenements de niveau load, unload, focus et blur ne bouillonnent pas (ce qui est 
logique, si on y reflechit apres avoir lu cette section). 

Un evenement bouillonnant (ce qui ne signifie pas qu'il fera la une des journaux) est 
d'abord declenche sur l'element le plus proche d'apres le contexte courant ; en clair, 
l'element situe sous la souris (pour un evenement souris), ou ayant le focus clavier 
(pour un evenement clavier). Cet element, qui constitue la cible physique de 1' evene- 
ment, est souvent appele l'element source. L'evenement est ensuite declenche a nou- 
veau pour chaque nceud parent de l'element source. L'evenement remonte done toute 
la hierarchie du document, jusqu'au nceud racine Document lui-meme. On dit que 
l'element bouillonne, traduction un peu pataude pour le terme anglais to bubble up. 

Ainsi, dans le document du listing 3-8, si l'utilisateur clique sur le lien homeLink, 
c'est d'abord ce lien qui va recevoir l'evenement, puis son noeud parent, navbar, 
ensuite le body, l'element html, et finalement document, l'objet global qui represente 
le noeud racine du DOM pour la page. 

Ce qui est tres important, c'est que chaque nceud sur ce chemin a l'opportunite de 
stopper la propagation, ou si vous preferez, d'interrompre le bouillonnement. La pro- 
cedure standard pour cela consiste a appeler la methode stopPropagationO de 
l'objet Event (et sous MSIE, c'est bien entendu different : on met la propriete 
cancelBubble a true). 

Pourquoi stopper la propagation ? C'est pratique lorsque vous savez que votre ges- 
tionnaire est cense etre le « terminus » pour cet evenement. Et c'est le cas la plupart 
du temps : les pages ou un meme evenement doit etre traite a plusieurs niveaux hie- 
rarchiques sont rares. 
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La capture, ou comment jouer les censeurs 

La capture n'est pas, contrairement a une idee repandue, simplement l'inverse du 
bouillonnement. En realite, les deux mecanismes peuvent parfaitement coexister. 

La capture est concue pour permettre a un gestionnaire place a un niveau donne du 
DOM de « censurer » l'evenement qu'il recoit pour tout le fragment dont son noeud 
est racine (en tout cas, au moment de l'association : un noeud descendant a ce 
moment-la, mais qui serait ensuite deplace hors du fragment par une manipulation 
du DOM, serait toujours sujet a la capture). 

II ne s'agit done pas de traiter l'evenement a proprement parler, mais de le censurer 
d'apres un algorithme correspondant a votre logique d'interface, que vous aurez 
implemented dans le gestionnaire. Lorsque l'evenement vise a lieu pour un element 
descendant de celui sur lequel vous avez enregistre la capture (je dis bien descendant : 
pas le nceud lui-meme, ni un noeud ailleurs dans le DOM), votre gestionnaire est 
declenche. S'il stoppe la propagation (toujours avec la methode stopPropagation de 
l'objet Event), l'evenement ne sera pas declenche sur son element source, et ne 
bouillonnera done pas le cas echeant. 

Ainsi, prenons l'appel suivant : 

Listing 3-9 Un exemple de capture pour censure inconditionnelle 

document. get El ementByldC navbar ') .addEventListenerC click 1 , 
function (event) { event. preventDefaultO ; }, true); 

Ce code empecherait toute detection de clic par le contenu de navbar, et done, entre 
autres, notre lien homeLi nk. 

II faut preciser que ce mecanisme est rarement utile. On sen sert plus pour geler 
l'interface pendant un traitement (en refusant tout evenement utilisateur jusqu'a 
nouvel ordre pour tout ou partie du document) que pour des besoins subtils et per- 
fectionnes. Par ailleurs, certains evenements ne sont pas capturables ; e'est le cas par 
exemple des evenements relatifs au focus, de mousemove ou encore de load et unload. 

Et pour finir, la cerise habituelle : le mecanisme de capture n'est pas pris en charge 
par MSIE. D'ailleurs, vous avez bien vu que attachEvent n'a pas de parametre pour 
la capture, et vous chercherez en vain une methode captureEvent, qui aurait trop 
ressemble a son homonyme du Netscape de l'epoque... 

Pour resumer, faites simple : evitez la capture. 
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L'objet Event 



Le declenchement d'un evenement donne lieu a la creation d'un objet pour le repre- 
senter. Cet objet est cense implementer l'interface Event, ainsi qu'une interface plus 
specialisee selon le type de 1' evenement (par exemple, UIEvent ou MouseEvent). Je dis 
cense, car bien entendu, MSIE traite cela a sa facon. 

Tout gestionnaire d'evenement recoit normalement l'objet Event en argument. Sous 
MSIE, il n'est pas passe en argument mais est present dans l'objet global 
window. event. 

Le module evenements est Fun des points les plus sensibles de la faille entre MSIE et 
le respect du DOM niveau 2. Cette faille est bien sur masquee par des bibliotheques 
comme Prototype. Afin de simplifier la description et de l'homogeneiser, les sections 
qui suivent presenteront toujours trois syntaxes pour chaque aspect : 

• La syntaxe officielle du standard, nommee « DOM ». Elles supposent toutes que 
l'argument du gestionnaire s'appelle event. 

• La syntaxe proprietaire de MSIE, seule supportee par ce dernier. 

• La syntaxe portable offerte par Prototype, ce qui constitue certes un petit saut en 
avant vers le chapitre 4, mais vous rassurera a chaque fois quant a l'inutilite de 
devoir jongler manuellement entre les versions officielle et MSIE. 

Recuperer ('element declencheur 

Un gestionnaire a souvent besoin de recuperer 1' element source, ou cible, de l'evene- 
ment declenche. C'est particulierement vrai quand vous declarez un gestionnaire 
unique au niveau du conteneur pour traiter de facon similaire un meme evenement 
survenant chez plusieurs elements descendants (si cet evenement bouillonne, comme 
le fera par exemple un clic, votre gestionnaire sera forcement notifie). 

• DOM : event. target 

• MSIE : window. event. srcElement 

• Prototype : Event, element (event) 

Stopper la propagation 

Nous avons deja examine ce mecanisme a la section sur la capture et le bouillonnement. 

• DOM : event. stopPropagationO 

• MSIE : window, event, cancel Bubble = true 

• Prototype : Event, stop(event) (annule aussi le traitement par defaut) 
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Annuler le traitement par defaut 

La notion de traitement par defaut est tres interessante et critique pour de nom- 
breuses utilisations. 

La majorite des evenements ont un traitement par defaut, qui correspond a ce que 
ferait le navigateur si vous ne definissiez aucun gestionnaire pour l'evenement. Par 
exemple, cliquer sur un lien navigue vers la cible de ce lien ; soumettre un formulaire 
envoie les informations a la couche serveur. 

Sauf demande explicite dans votre gestionnaire, ce traitement par defaut aura lieu. 
Or, une fonction de verification de validite des saisies dans un formulaire voudra 
pouvoir empecher l'envoi du formulaire, en plus de signaler les problemes de saisie. 
De meme, une fonction chargee d'afficher la cible d'un lien dans une fenetre surgis- 
sante voudra empecher la fenetre contenant le lien de naviguer elle aussi vers la cible. 

Vous trouverez de nombreux exemples sur le Web qui vous diront qu'il suffit 
que votre gestionnaire renvoie false, ce qui est aujourd'hui parfaitement perime 
(au point que 9a ne marche meme plus dans MSIE !). 

Les mecanismes operationnels a ce jour sont les suivants : 

• DOM : event. preventDefaultO 

• MSIE : window. event. returnValue = false 

• Prototype: Event, stop(event) (stoppe aussi la propagation). 

JavaScript, evenements et accessibility 

Une page qui ne fonctionnerait qu'avec JavaScript active, parce quelle reposerait 
integralement sur JavaScript et les evenements pour assurer son role, constituerait un 
grave probleme d'accessibilite au sens large. 

D'abord, de nombreux contextes n'auront pas JavaScript (navigateurs textuels, certains 
navigateurs sur peripheriques mobiles : telephones, Palm Pilot/Visor, etc.), auront 
JavaScript desactive (par decision des responsables informatiques de l'entreprise), 
ou auront une prise en charge tres partielle (lecteurs d'ecran). Tous ces utilisateurs, 
pourtant parfaitement legitimes, ne pourront utiliser correctement la page. 

Meme avec JavaScript operationnel, il est irresponsable d'exiger des manipulations 
clavier ou souris complexes de tous vos utilisateurs : certains souffrent peut-etre d'un 
handicap moteur ou ont un peripherique {touchpad ou trackpoint sur un portable) les 
empechant de manipuler la souris avec precision ; d'autres ne peuvent confortable- 
ment lui associer un modificateur clavier (par exemple, si vous attendez un Ctrl+Clic), 
voire tout simplement d'utiliser la souris (handicap moteur plus lourd). Utiliser des 
evenements souris de facon exclusive est tres vite limitatif 
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Quand bien meme vous decideriez d'envoyer paitre la base utilisateur « handicapee » 
au sens large (handicaps moteurs, visuels, cognitifs), soit plus de 15 % des internautes 
mondiaux (plus d'un million de personnes rien qu'en France), vous n'aurez peut-etre 
pas le choix : un niveau eleve d'accessibilite est aujourd'hui une exigence legale pour 
tout appel d'offres emanant du service public, et un nombre croissant d'appels 
d'offres prives l'exigent egalement. 

Accessibilite ne rime pas avec impossibilite, ni meme avec complexite : il s'agit sim- 
plement d'ajuster nos habitudes de developpement pour l'integrer dans nos reflexes 
de code. Vous trouverez une panoplie tres complete de documentations pratiques en 
francais traitant de l'accessibilite et le Web sur le site d'Accessiweb, la cellule specia- 
lisee de l'association BrailleNet : http://www.accessiweb.org/. 

Void deja quelques conseils a retenir : 

• Une pierre d'angle est bien sur Y unobstrusive JavaScript, deja discute, qui consiste 
a ne jamais mettre de scripts ou d'attributs evenementiels dans votre HTML : 
n'y laissez que le contenu ! 

• Autre reflexe important : pour assurer que votre page se degrade elegamment 
(c'est-a-dire continue de fonctionner correctement au fur et a mesure que les 
moyens du bord se restreignent : plus de CSS, plus d'image, plus de JavaScript...), 
le mieux est de la realiser par amelioration progressive. 

En d'autres termes, commencez par faire une page capable de fonctionner sans 
aucun JavaScript, mais qui n'aura recours qua des allers-retours avec la couche 
serveur. Ensuite, ameliorez-la par petites touches a coups d'ajouts de gestionnai- 
res depuis votre fichier de script (toujours unobstrusive...). En partant du bas, vous 
garantissez que la page est capable d'y retourner ! 

• Les fonctions de confort realisees en JavaScript n'ont pas obligatoirement a avoir 
un equivalent classique ; ce qui compte, c'est que la page puisse fonctionner, done 
rendre le service qui est sa raison d'etre, sans JavaScript. Tant pis si c'est alors, 
fatalement, un peu plus penible, un peu plus ardu. Lexemple typique est le tri de 
listes : sans JavaScript, on doit faire un aller-retour a chaque deplacement d'un 
element vers le haut ou vers le bas ; avec JavaScript, on peut glisser-deplacer tout 
ce beau monde vite fait et valider a la fin ! 

Malgre beaucoup d'astuce dans l'emploi de JavaScript, il reste toutefois difficile de 
rendre facile d'emploi, particulierement au clavier, des interfaces dynamiques un peu 
riches, comme des arborescences depliables et repliables, des menus deroulants a 
multiples niveaux ou encore des grilles de donnees. 

Mais sur ce front, l'espoir renait : pour faciliter l'accessibilite de ces realisations, une 
initiative « DHTML accessible » a vu le jour conjointement entre le W3C, IBM et 
la fondation Mozilla. Elle est d'ores et deja implementee dans Firefox 1.5. A l'aide 
d'attributs supplementaires decrivant le role fonctionnel des elements, il est possible 
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de faciliter grandement l'utilisation et la navigation au clavier de composants visuels 
riches et complexes (principalement a l'aide des fleches et de Tabulation, comme sous 
Windows ou Mac OS X, par exemple). Cela ouvre des horizons ! Vous en trouverez 
davantage sur la page dediee du site Mozilla Developer Connection (MDC) et sur 
les pages concernees du W3C : 

• http://developer.mozilla.org/en/docs/Accessible_DHTML 

• http://www.w3.org/WAI/PF/roadmap/ 

L'initiative se penche d'ailleurs aussi sur l'accessibilite d'Ajax. On ne peut que 
l'encourager ! 

Enfin, quelques techniques utiles : 

• Les accessible pop-ups, ou fenetre surgissantes accessibles, decrivent comment faire 
pour qu'un lien s'afEche dans une fenetre surgissante si JavaScript est actif, ou suive 
sa navigation traditionnelle dans le cas contraire. C'est un grand classique, decrit avec 
tous les details de mise au point dans http://www.alistapart.com/articles/popuplinks/. 
Pour vraiment se blinder, on verifiera que la fenetre a bien ete ouverte (un bloqueur 
de pop-ups un peu trop zele pourrait Ten avoir empeche), comme decrit sur 
http://cookiecrook.com/AIR/2003/train/xmp/popup/pop.js. 

• Ne modifiez le focus par script qu'avec parcimonie. En effet, changer le focus sans 
intervention de l'utilisateur peut se reveler extremement genant pour ceux utilisant 
une loupe d'ecran voire un lecteur d'ecran. C'est done a eviter, tout particulierement 
si vous pensiez le faire periodiquement (par exemple, toutes les 30 secondes) ! 
En revanche, c'est parfaitement acceptable suite a une action manuelle de l'utilisa- 
teur (par exemple, en reaction a 1' activation du bouton Lire mes courriels, on peut 
deplacer le focus sur la liste des courriels apres avoir chargee celle-ci). 

• Ne limitez pas vos evenements traites a ceux specifiques a la souris, sauf peut-etre 
pour click, simule par tous les navigateurs avec la touche Entree. Preferez coupler 
la version souris et la version clavier, par exemple mouseover avec focus et 
mouseout avec blur, etc. 



Besoins frequents et solutions concretes 

Armes de toutes ces connaissances nouvelles, nous allons a present les mettre en 
application au travers de quelques exemples concrets, qui repondent par ailleurs a des 
besoins recurrents. Nous ne detaillerons pas chaque script, il s'agit plutot de faire une 
demonstration generate. Utilisez la specification pour eclaircir les eventuels details 
que vous ne saisiriez pas bien. Tous ces exemples figurent dans 1' archive des codes 
source disponible sur la page de l'ouvrage sur le site des editions Eyrolles. 
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Precisons aussi, avant de commencer, que ces exemples seraient souvent considera- 
blement simplifies par l'emploi judicieux des ameliorations fournies par Prototype, 
mais ne mettons pas la charrue avant les boeufs... 

Decoration automatique de labels 

Commencons par une decoration automatique de labels. Comme vous le savez, l'ele- 
ment 1 abel sert a identifier le libelle d'un champ de formulaire. On peut l'associer au 
champ soit en affectant l'ID du champ a l'attribut for du label, soit en placant le 
champ dans l'element label, apres (ou avant) le texte du libelle. 

Nous allons gerer une decoration automatique (au chargement de la page) de ces 
liberies centree sur deux aspects : 

1 Tout libelle disposant d'un attribut access key tentera de souligner la lettre cor- 
respondante dans son texte, pour rendre la touche de raccourci evidente visuelle- 
ment. 

2 Tout libelle disposant d'un attribut for (methode preferee d'association) verifiera 
que le champ existe, et si tel est le cas, examinera l'ID du champ pour y detecter le 
texte ' Req ' : si ce texte est present, il considerera que le champ est requis, et 
s'ajoutera done la classe CSS requi red, que nous aurons definie comme affichant 
le texte en gras (et sur les navigateurs supportant la pseudoclasse : after et la pro- 
priete content, nous ajouterons une asterisque dynamique apres le libelle). 

Void le fichier index, html sur lequel nous allons appliquer notre script : 
Listing 3-10 Le HTML qui va subir notre decoration automatique 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

*» xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 
*• charset=iso-8859-15" /> 

<title>Exemple DOM n°l : decoration automatique de labels 

</title> 

<link rel="stylesheet" type="text/css" href="demo.css" /> 

<script type="text/javascript" src="demo. js"x/script> 
</head> 
<body> 

<hl>Decoration automatique de label s</hl> 
<p>Examinez le code source du formulaire 
ci-dessous, et comparez a ce que vous obtenez visuellement .</p> 
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<p>(Notez que 1 'envoi du formulaire ne menera a rien de parti culier)</p> 

<form id="demoForm" method="get" action="http://www. example. com"> 

<P> 

<label for="edtReqLogin" accesskey="D">Identifiant</label> 
<input type="text" id="edtReqLogin" name="login" tabindex="l" /> 

</p> 

<P> 

<label for="edtFirstName" accesskey="P">Prenom</label> 

<input type="text" id="edtFirstName" name="fi rstName" tabindex="2" /> 

</p> 

<P> 

<label for="edtLastName" accesskey="N">Nom</label> 

<input type="text" id="edtLastName" name="lastName" tabindex="3" /> 

</p> 

<p class="submit"> 

<input type="submit" value="Envoyer" accesskey="E" tabindex="4" /> 

</p> 

</form> 

</body> 
</html> 

Notez l'absence de tout balisage non semantique : ni table ni fatras de div et span 
pour la mise en page. Et pourtant, on pourra obtenir un aspect irreprochable grace a 
la feuille de styles, dont voici le contenu (demo . ess) : 

Listing 3-11 Notre feuille de styles pour cet exemple 

form#demoForm { 

width: 40ex; 

padding: lem; 

margin: 2em auto; 

border: lex solid silver; 

background: #eee; 

font-family: sans-serif; 
} 

form#demoForm p { 

position: relative; 

margin: 0. 5em; 
} 

form#demoForm p. submit { 

margin: 0; 

text-align: right; 
} 
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input#edtReq Login , input#edtFi rstName, input#edtLastName { 

position: absolute; 

left: 20ex; 

right: 0; 
} 

input: focus { 

border: 2px solid black; 

background: #ffd; 
} 

label . required { 

font-weight: bold; 
} 

label . required: after { 

content: '*'; 
} 

span.accessKey { 

text-decoration: underline; 
} 

Enfin, voici notre script demo . j s, qui constitue le sel de l'exemple : 
Listing 3-12 Notre script de decoration automatique des libelles 

// Etre compatible avec MSIE... 
if ('undefined' == typeof Node) 

Node = { ELEMENT_NODE: 1, TEXT_N0DE: 3 }; 

function addListener(element , baseName, handler) { 
if (element .addEventListener) 

element .addEventListener(baseName, handler, false); 
else if (element .attachEvent) 

element .attachEvent('on ' + baseName, handler); 
} // addListener 

function decorateLabels() { 

var labels = document. getElementsByTagNameC label ') ; 
for (var index = 0; index < labels. length; ++index) { 
var label = labels [index] ; 
if (label .accessKey) { 

var ak = label .accessKey . toUpperCaseO ; 
decorateNodeForAccessKey (label , ak) ; 
} 
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if (label .html For) { 

var elt = document. get El ementByld (label .html For) ; 
if (!elt) 

continue; 
if (elt. id. match (/Req/)) 

label .className += ' required'; 
} 
} 
} // decorateLabels 

function decorateNodeForAccessKey(elt, key) { 
if (Node.ELEMENT_NODE == elt .nodeType) { 

var node = elt.fi rstChild; 

while (node && !decorateNodeForAccessKey(node, key)) 
node = node.nextSibling; 

// Si node n'est pas null, on a trouve 1 'AK dans un descendant 

// et on a decore : on renvoie non-null, equivalent a true 

return node; 
} 
if (Node.TEXT_NODE != el t. nodeType) 

return false; 
var pos = elt.nodeValue.toUpperCaseO .indexOf (key) ; 
if (-1 == pos) 

return false; 
var suffix = elt .nodeValue. substring(pos + 1); 
var akSpan = document .createElementC span') ; 
akSpan. className = 'accessKey'; 

akSpan.appendChild(document.createTextNode(elt.nodeValue.charAt(pos))) ; 
// On evite node.splitText et node. del eteData sur MSIE... 
// On manipule nodeValue et on cree le deuxieme noeud Texte manuellement. 
elt .nodeValue = elt .nodeValue. substring(0, pos); 
el t . parentNode . appendChi 1 d(akSpan) ; 

el t . parentNode . appendChi 1 d(document . createTextNode(suf f ix)) ; 
// Tres important pour eviter une recursion infinie ! 
return true; 
} // decorateNodeForAccessKey 

addListener(window, 'load', decorateLabels) ; 
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Void notre page apres chargement. 



Figure 3-10 

Notre page chargee, avec ses 
libelles decores 
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Decoration automatique de labels 

Examines le code source du formulaire ci-dessous, et comparez a ce que vous 

obtenez visuellement. 

(Notezque 1 'envoi du formulaire ne menera a rien de partioulier) 





Identifiant* | 


Prenom 


Norn 


Envoyer 



J± 



C'est deja un bel exemple d'application, plutot complet. Je vous encourage a l'ameliorer 
au travers de deux petits exercices. 

1 Listez toutes les valeurs de l'attribut access key (pas seulement dans les labels, 
mais dans tous les elements : utilisezgetElementsByTagNameC*')) et detectez les 
collisions : ajoutez alors un cadre rouge aux libelles a l'aide de leur propriete 
style: label .style, border = '2px solid red';. Vous vous rendrez ainsi 
un fier service, car on a vite fait d'associer deux fois le meme raccourci au fil de 
revolution de la page. 

2 Toujours en iterant sur tous les elements dotes d'un attribut accesskey, ajustez 
l'attribut title des elements beneficiant du raccourci (pour un label, il faut aller 
sur l'element reference dans for), soit en lui ajoutant un texte de type ' (Alt+X) ' 
si une valeur existe deja, soit en creant la valeur 'Alt+X' . Si vous voulez pousser, 
vous pourrez meme detecter que vous etes sur Mac OS, en cherchant par exemple 
le texte 'Macintosh' a l'interieur de navigator. userAgent etutiliser 'Cmd' plutot 
que 'Alt'... 
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Validation automatique de formulaires 

Toujours plus fort, nous allons maintenant fournir une validation avancee de formu- 
laires. Ce chapitre se concentrant sur le DOM, je ne vous fournis plus a present que 
le script. Vous trouverez la demonstration complete dans 1' archive des codes source 
disponible sur le site des editions Eyrolles. 

Qu'entendons-nous par « validation automatique » ? 

1 Chaque formulaire du document se voit associer notre gestionnaire d'interception 
de l'evenement submit (qui est cumulatif aux autres gestionnaires eventuellement 
enregistres). 

2 Le submit est done intercepte par notre gestionnaire, qui recupere tous les champs 
(input, select, textarea) du formulaire et examine leurs ID. Nous prenons 
en charge une syntaxe particuliere dans les ID, decrite plus has, qui permet de 
specifier les contraintes de validation. 

3 On accumule au fur et a mesure le texte des messages d'erreur dans un unique 
message. On garde egalement une reference vers le premier champ fautif 

4 En fin de traitement, si aucune erreur n'a ete detectee, on ne fait rien, ce qui laisse 
passer l'envoi du formulaire. En revanche, si on a detecte un pepin, on signale 
l'erreur (ici avec un alert, mais vous pourriez avoir un div expres pour 9a, creer 
une liste ul/li de toute piece, etc.), on met le focus sur le premier champ, on 
stoppe la propagation et on annule le traitement par defaut. 

La syntaxe que nous prendrons en charge pour les ID est la suivante : 

prefixeQue 7coA7<7ue_[Req][_(lnt | Dbl |Date)][_m7A7[_max]] 

Quelques details d'interpretation : 

• Req indique, comme tout a l'heure, que le champ est requis. 

• Int indique un champ a valeur entiere, Dbl un champ Double, done a virgule fiot- 
tante, et Date un champ date, pour lequel on exigera ici, par simplicite, un format 
j j/mm/aaaa. On ne validera pas la date en profondeur (libre a vous...). 

• Pas de max sans mi n d'abord. On ne les prend pas en charge pour les dates non 
plus, par souci de simplicite de l'exemple. 

Voici le fragment de HTML qui contient notre formulaire : 
Listing 3-13 Notre formulaire et ses ID specialement concus 

<form id="demoForm" method="get" action="http://www. example. com"> 

<P> 

<label for="edtLogin_Req" access key="D">Identifiant</label> 
<input type="text" id="edtLogin_Req" name="login" tabindex="l" /> 

</p> 
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<P> 

<label for="edtAge_Req_Int_l_120" accesskey="A">Age</label> 

<input type="text" id="edtAge_Req_Int_l_120" name="age" 
*» tabindex="2" value="toto" /> 
</p> 
<P> 

<label for="edtEuroRate_Dbl_0.01" accesskey="T">Taux de l'euro 

</label> 

<input type="text" id="edtEuroRate_Dbl_0.01" name="euroRate" 
* tabindex="3" value="6. 55957" /> 
</p> 
<P> 

<label for="edtBi rthDate_Date" accesskey="N">Date de naissance 

</label> 

<input type="text" id="edtBirthDate_Date" name="bi rthDate" 
tabindex="3" value="04/ll/1977" /> 
</p> 
<p class="submit"> 

<input type="submit" value="Envoyer" accesskey="E" tabindex="4" /> 

</p> 
</form> 

Et void les fragments importants du script (le reste est sur le site...) : 

Listing 3-14 Notre validation automatique de formulaires 

RECEX_AUTO_FIELD = /A[A_] + (_Req)?(_(Int | Dbl |Date) (_[0-9.]+){0, 2})?$/; 

REGEX_BLANK = /A\s*$/; 

RECEX_DAY = /a(0?[1-9] | [1-2] [0-9] | 3 [01])$/; 

RECEX_MONTH = /A(0?[l-9] | l[0-2])$/; 

// Les multiples groupes vont nous decouper l'ID tout seuls... 

RECEX_TYPED_FIELD = /_(Int | Dbl | Date) (_( [0-9. ]+))?(_( [0-9. ]+))?$/; 

RECEX_YEAR = /A [0-9] {2 , 4}$/; 

function addFormChecks() { 

var forms = document. forms; 

for (var index = 0; index < forms. 1 ength ; ++index) { 

var form = forms. item(index) ; 

addListener(form, 'submit', checkForm) ; 

} 
} // addFormChecks 

function checkForm(e) { 

// Compatibility MSIE / les autres... 
e = e || wi ndow. event ; 
var form = e. target || e.srcElement ; 
var errors = ' ' ; 
var faulty = null ; 

for (var index = 0; index < f orm. el ements.l ength ; ++index) { 
var field = form. elements .item(index) ; 
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// Verification de syntaxe 

if ( ! f i el d . i d . match (RECEX_AUTO_FIELD)) 

continue; 
var value = getFieldValue(field) ; 
// Champ requis ? 

if (f i eld. id. match (/_Req/) && value. match (REGEX_BLANK)) { 
errors += getFi el dName (field) + MSG_BLANK + '\n'; 
faulty = faulty || field; 
continue; 
} 

// Champ type ? 

var match = f i eld. id. match (RECEX_TYPED_FIELD) ; 
if (match) { 

var type = match [1]; 

var min = match [3] ; 

var max = match [5]; 

var error = checkTypedFi eld (value, type, min, max); 

if (error) { 

errors += getFieldName(field) + error + '\n'; 
faulty = faulty | | field; 
} 
} 
} 
if (! faulty) 

return; 
stopEvent(e) ; 
alert(errors) ; 
faulty. focus() ; 
} // checkForm 

function checkTypedField(value, type, min, max) { 
// Valeurs par defaut pour les bornes 
min = min || Number .NECATIVE_INFINITY; 
max = max || Number . POSITIVE_INFINITY; 
var val ; 

if ('Int' == type) { 
try { 

val = parselnt(value, 10); 
if (String(val) != value) 
throw val ; 
} catch (e) { 

return MSC_NOT_AN_INTECER; 
} 
} 

if ('DbT == type) { 
try { 

val = parseFloat(value) ; 
if (String(val) != value) 
throw val ; 
} catch (e) { 
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return MSG_NOT_A_DOUBLE; 
} 
} 

if ('Inf == type || 'DbT == type) { 
i f (val < mi n) 

return MSC_TOO_LOW; 
i f (val > max) 

return MSC_TOO_HICH; 
} 
if ('Date' == type) { 

var comps = value. sp"lit('/') ; 

if (3 != comps. length || ! comps [0] .match (RECEX_DAY) || 
! comps [1]. match (RECEX_MONTH) || 
! comps [2] . match (RECEX_YEAR)) 
return MSC_NOT_A_DATE; 
} 

return null ; 
} // checkTypedField 

Les fonctions de service (getFieldName, getFieldValue, stopEvent) etles textes des 
messages sont kisses de cote, car ils n'apportent pas grand-chose a la fonctionnalite 
pure de l'exemple. Vous les trouverez dans 1' archive disponible en ligne. On a deja un 
bon script d'exemple, qui illustre la majorite des elements techniques vus dans ce 
chapitre et le precedent ! 

Je ne saurai trop vous recommander de vous faire la main a l'aide des exercices suivants : 

1 Ajoutez un gestionnaire au chargement qui donne le focus a l'element de 
tabindex valant 1 (un) dans la page. 

2 Augmentez la richesse de la syntaxe, en permettant en cas de type Date de definir, 
avant les bornes mais separe de 'Date' par un souligne (_), le format de date, 
parmi les possibilites suivantes : dmy, mdy et ymd. Vous pourrez alors ajuster la vali- 
dation. Encore mieux : faites qu'un y (minuscule) signifie « annee sur deux 
chiffres » et un Y (majuscule) « annee sur quatre chiffres ». 

Vous pouvez voir un exemple d'execution a la figure 3-11. 



Resoudre les ecueils classiques 

Ce dernier exemple, en particulier dans sa version complete, disponible en ligne, 
illustre les principaux ecueils du scripting DOM, qui tournent principalement autour 
des differences entre MSIE et les autres navigateurs. 
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Figure 3-11 
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II existe aussi, bien sur, des problemes plus pointus, presents sur d'autres navigateurs 
repandus, comme des soucis de positionnement complexes ou de noms d'evenements 
sur Firefox, Safari, etc. Mais il ne s'agit pas d'ecueils classiques. 



MSIE et la gestion evenementielle 

On l'a vu dans la section dediee a ce sujet, quand il s'agit d'evenements, MSIE ne fait 
rien comme les autres : pas de stopPropagationO, pas de preventDefaultO, 
pas d'interface Event, de propriete target, ni d'objet evenement passe en argument 
aux gestionnaires... 

Vous avez pu voir des contournements manuels dans ce dernier script d'exemple, 
mais la solution la plus portable consiste a utiliser Prototype et son objet global 
Event. En plus d'offrir des methodes equivalentes universelles (stop, element, etc.), 
il fournit une interface unifiee sur l'ensemble des proprietes specifiques des evene- 
ments (etat des modificateurs clavier, position de la souris et j'en passe). 
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MSIE et le DOM de select/option 

II existe egalement un probleme sur MSIE concernant le DOM des elements sel ect 
et option, qui decrivent les champs de type liste. Le DOM prevoit deux 
comportements : 

• Une propriete value directement au niveau du select, qui fournit la valeur 
actuellement selectionnee s'il y en a une (la premiere en cas de selection multiple). 

• Une propriete val ue au niveau des options, qui prend automatiquement la valeur 
de la propriete text si l'attribut value n'est pas defini pour la balise option 
correspondante (ce comportement est en fait defini carrement par HTML 4.01). 

MSIE ne respecte aucun de ces deux comportements. C'est pourquoi il faut recu- 
perer la valeur en passant par la collection options du select, sa propriete 
selectedlndex, et les proprietes value et text de l'option. Cet algorithme alourdi 
est present dans notre fonction getFieldValue, non imprimee ici. 

Une solution portable consiste a utiliser la fonction $ F de Prototype pour recuperer 
la valeur d'un element. Elle gerera meme correctement les valeurs d'une liste a 
selection multiple ! 



Les principaux points problematiques 



Si on fait le bilan de ce que nous avons appris sur le DOM, on constate qu'on a a portee 
de main une puissance de traitement extraordinaire, avec la possibilite d'explorer les 
moindres recoins du document, et de le manipuler comme bon nous semble. 

Helas ! Le prix de ces possibilites est un peu lourd a payer : 

• La mauvaise prise en charge du DOM niveau 2 (ou meme niveau 1, pour certains 
points) par MSIE pose de graves problemes de portability, nous forcant a alourdir 
considerablement notre code. 

• D'autres navigateurs ont aussi quelques accrocs dans leur prise en charge du 
DOM, bien que sur des points beaucoup plus benins. 

• Les codes creant des fragments de DOM sont generalement verbeux : les interfa- 
ces qui nous sont fournies sont puissantes, mais il faut beaucoup de code pour 
creer quoi que ce soit, meme des fragments tres simples, du type : 

<img src="logo.png" /> ou <hl>Merci !</hl>. 

• II est impossible de realiser une extraction sur la base d'une regie CSS, alors que 
c'est la syntaxe de selection que connaissent le mieux les developpeurs web. 

Toutefois, des solutions existent, meme si elles ne sont pas forcement fournies par 
un standard W3C. 
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Ainsi, Prototype simplifie beaucoup de choses et ajoute de nombreuses possibilites. 
Nous allons nous regaler au chapitre suivant, en decouvrant toute cette puissance 
concue pour etre facile d'emploi ! 

La bibliotheque script. aculo.us, basee sur Prototype, fournit un objet Builder concu 
specialement pour simplifier la creation de fragments DOM. Nous ne l'etudierons 
pas dans le chapitre 7, qui couvre la majorite de script, aculo.us en detail, mais des 
exemples clairs sont disponibles sur le site de la bibliotheque. 



Pour aller plus loin 

Livres 

DOM Scripting 

Jeremy Keith 

Friends of ED, septembre 2005, 341 pages 

ISBN 1-590-59533-5 



Sites 



DOM Scripting, le site : 

http://domscripting.com 

Le site de Jeremy Keith, gourou du scripting DOM : 

http://adactio.com 

Le site de Peter-Paul Koch, est un autre gourou du sujet : 

http://www.quirksmode.org 

La Mozilla Developer Connection a une reference complete de JavaScript et des 
informations sur le « DOM navigateur » (objets navigator, window, etc.) : 

— http://developer.mozilla.org/en/docs/JavaScript 

— http://developer.mozilla.org/fr/docs/JavaScript 

— http://developer.mozilla.org/fr/docs/DOM 

Les specifications sont le point de reference incontournable ! 
http://www.w3.org/D0M/D0MTR 

Le Web Standards Project (WaSP) fait avancer les standards qui comptent et sa 
DOM Scripting Force abat un boulot titanesque : 
http://webstandards.org/action/dstf 



4 



Prototype : simple, pratique, 

elegant, portable ! 



Sortie du cerveau fecond de Sam Stephenson (merci, merci, merci Sam !), Prototype 
est une bibliotheque JavaScript qui simplifie enormement la majorite des utilisations 
courantes de JavaScript, meme lorsqu'il s'agit de fonctions avancees.Tres bien struc- 
turee et organisee avec beaucoup de coherence, Prototype accroit considerablement 
les capacites des classes incontournables (Array, String, Number) et des elements 
HTML. Et tout ceci, en assurant une excellente portabilite d'un navigateur a l'autre, 
ce qui constitue d'ordinaire une epine dans le pied des developpeurs web. 

Ce qui est certain, c'est que les debutants JavaScript comme les gourous experi- 
mentes prendront tout a coup beaucoup plus de plaisir a ecrire du JavaScript s'ils uti- 
lisent Prototype. Alors vous aussi, faites-vous plaisir ; il vous suffit de lire ce chapitre. 
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Avant de commencer... 

Ce chapitre va documenter Prototype d'un point de vue utilisateur. C'est-a-dire 
qu'on ne s'interessera pas aux mecanismes internes de la bibliotheque, comme les 
methodes Object. extend, Class. create ou Element. extend, pour ne citer qu'elles. 
On n'ira pas non plus fouiller dans les champs et methodes prives des objets (genera- 
lement prefixes d'un tiret has, par exemple _observeAndCache ou 
_nativeExtensions), qui appartiennent aux details d'implementation. 

En effet, connaitre ces rouages ne nous est d'aucune utilite pour utiliser correctement 
la bibliotheque. Ce chapitre vous dit deja tout ce que vous avez besoin de savoir pour 
tirer parti au mieux des fonctionnalites proposees. Qui plus est, les details d'imple- 
mentation peuvent changer considerablement d'une version a l'autre (ce sera 
d'ailleurs le cas pour la version 2.0). Seule l'interface de la bibliotheque reste a peu 
pres stable. 

Prototype propose aussi quelques classes tout a fait remarquables pour encapsuler les 
traitements Ajax, mais nous attendrons le chapitre 6 pour les aborder, apres avoir 
decortiquer le fonctionnement de XMLHttpRequest. Nous pourrons alors repondre 
aux questions qu'aurait soulevees l'expose de ces classes s'il avait ete conduit dans ce 
chapitre. 

Enfin, sachez que la plupart des exemples de plus de 3 lignes de ce chapitre sont 
fournis avec leurs pages de test dans 1' archive des codes source pour ce livre, dispo- 
nible sur le site des editions Eyrolles. 

Un mot sur les versions 

A l'heure ou j'ecris ces lignes, la version publique de Prototype est la version 1.4.0, 
publiee en Janvier 2006. Toutefois, la version 1.5.0 finale est prevue prochainement, 
et la version actuelle est la RC1 (Release Candidate one), marquee au 
4 septembre 2006. 

La version 1.5 a ajoute une tres grande quantite de fonctions par rapport a la 
version 1.4.0, par exemple les fonctionnalites de selection sur classe et de gestion des 
modeles, des ameliorations a la couche Ajax, 1' extension des elements du DOM ou 
encore la correction d'un bogue de fuite memoire important sur MSIE. 

C'est pourquoi ce chapitre documente la version 1.5.0, sur la base du code source de 
la version 1.5.0 RC1. Vous etes ainsi a jour sur les jolies nouveautes. 

Vous pouvez vous procurer Prototype de plusieurs facons : 

• Telecharger l'archive ou le fichier JavaScript sur le site officiel (c'est peut-etre 
encore seulement la version 1.4.0) : http://prototype.conio.net/ 
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• Recuperer la derniere version de la bibliotheque script.aculo.us, etudiee en detail 
au chapitre 7. Elle inclut Prototype dans sa derniere variante 1.5.0 connue (a ce 
jour, 1.5.0_rcl avec quelques correctifs supplementaires) : 
http://script.aculo.us/downloads 

• L'archive des codes source pour ce livre contient dans chaque sous-repertoire de 
ce chapitre une version 1.5.0_rcl avec quelques correctifs supplementaires. 

L'objet global Prototype 

Commencons par l'objet global Prototype. II s'agit d'ailleurs plus d'un espace de 
noms que d'un objet. On y trouve d'abord Prototype. Version, une constante indi- 
quant la version exacte de Prototype, par exemple 1.5. 0_rcl. C'est utile pour verifier 
une dependance. La bibliotheque script.aculo.us, par exemple, s'en sert pour verifier 
qu'on l'utilise avec une version suffisamment recente de Prototype. Ainsi, la 
version 1.6.4, qui depend de Prototype 1.5.0, contient le fragment de code suivant : 

Listing 4-1 Exemple de verification de la version de Prototype 

if ((typeof Prototype == 'undefined' || 

parseF1oat(Prototype. Version. sp"lit(" . ") [0] + "." + 

» Prototype. Version. splitC". ") [1]) < 1.5) 
throw("script .aculo.us requires the Prototype . . . >= 1.5.0"); 

Par ailleurs, Prototoype renferme deux fonctions simplistes, fort utiles dans de nom- 
breux emplois de methodes necessitant un iterateur (voir la prochaine section) : 

• Prototype. emptyFuncti on est une fonction vide, comme son nom l'indique. Elle 
ignore ses arguments, ne fait rien, et ne renvoie rien. Prototype s'en sert souvent 
pour eviter d'avoir a gerer le cas d'une fonction optionnelle qui n'aurait pas ete 
fournie, en basculant sur celle-ci au moyen d'un simple operateur | | . Nous ver- 
rons un exemple de cela au chapitre 8, dans notre exemple autour de Flickr. 

• Prototype. K est la fonction identite : elle renvoie simplement son premier argu- 
ment. Elle est utilisee par de nombreuses methodes a iterateur, lorsqu'un iterateur 
specifique n'est pas fourni. Dans les prochaines sections, vous verrez de nombreu- 
ses methodes ayant un iterateur optionnel en argument. S'il n'est pas fourni, c'est 
Prototype . K qui est utilise a sa place. 



Dormer vie aux pages 

Premiere partie 

Vocabulaire et concepts 

Commencons par rappeler qu'en JavaScript, il n'y a pas a proprement parler de 
classes : tout est un objet. Lheritage est obtenu par ajout de champs et methodes aux 
proprietes du prototype d'un objet. Nous avons couvert cela au chapitre 2. 

Espaces de noms et modules 

J'aurai souvent recours aux termes « espace de noms » et « module », que j'utilise ici 
de facon presque interchangeable. Lorsque je qualifie un objet d'espace de noms, je 
veux dire qu'il n'est pas destine a etre instancie, ni meme incorpore au prototype d'un 
autre objet. II n'existe que pour donner un contexte nomme a ses methodes, et leur 
eviter ainsi d'etre globales, mais aussi d'avoir a utiliser un nom plus long. 

On trouve ainsi par exemple les objets Ajax, Element, Abstract et Insertion, qui ne 
constituent que des espaces de noms, comme un namespace C++, un paquet Java ou 
une unite Delphi. 

Je qualifie par ailleurs certains objets de modules. Ces objets servent a regrouper des 
methodes autour d'un aspect particulier, lesquelles sont vouees a etre incorporees aux 
prototypes d'autres objets, afin de leur ajouter cet aspect. J'emploie ici le terme 
« aspect » au sens de la programmation orientee aspects (AOP). Le terme module 
prend ici le sens exact qu'il a, par exemple, en Ruby. 

Prototype fournit plusieurs modules, dont Enumerable et Element. Methods. 

Iterateurs 

Vous allez aussi rencontrer le terme « iterateur » a tout bout de champ. Dans le cadre 
de Prototype, je qualifierai d'iterateur une fonction destinee a etre invoquee sur 
chaque element d'une iteration. Cette iteration est realisee par une fonction qui 
recoit la notre en argument. Ainsi, Prototype. K est exclusivement utilisee, en 
interne, comme iterateur par defaut. II s'agit la d'une legere difference avec le sens 
classique du mot, qui designe le mecanisme d'iteration, et non celui d'operation sur 
les elements produits par l'iteration. 

Les iterateurs permettent de separer la logique d'iteration de celle d'action, qui opere sur 
chaque element. Vous les trouverez dans la plupart des bibliotheques standardisees de 
classes, mais il ne s'agit pas toujours de la fonction operative, comme ici avec Prototype. 

En C++, un iterateur est un objet encapsulant la logique d'iteration, et non celle 
d'operation. II suffit generalement qu'il fournisse les operateurs *, -> et ++. En Java 
aussi, l'iterateur encapsule l'iteration elle-meme, sous forme de l'interface 
Java . uti 1 . Iterator. En Ruby, un iterateur est une methode encapsulant l'iteration, 
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qui recoit un bloc ou une Proc en argument, auquel la methode passe tour a tour 
chaque element de l'iteration. Vous trouverez des equivalents en Perl, Python, C#, etc. 



Element etendu 



Prototype estime que les elements HTML, tels que les fournit le DOM, sont un peu 
nus. II est vrai qu'au regard des utilisations communes qu'on en fait, l'interface 
HTMLE1 ement du DOM niveau 2 HTML (voir chapitre 3) est assez legere. Prototype 
fait done tout son possible pour enrichir les elements qu'il vous renvoie. 

Si le navigateur offre un mecanisme de prototype pour les elements du DOM, 
Prototype enrichit automatiquement tous les elements des methodes presentes dans 
le module El ement . Methods, que nous verrons en detail plus loin. 

Par ailleurs, tout element de type champ de formulaire recoit egalement les methodes 
de Form. Element .Methods (toutes celles de Form. Element moins focus et select, 
Dieu sait pourquoi...). Dans le meme esprit, tout element form recoit egalement les 
methodes de Form. Methods (toutes celles de Form sauf reset, meme remarque). 

Si cette possibilite lui est refusee (par exemple sur MSIE), il enrichira a la volee tout 
element accede au travers de ses incontournables fonctions $, $$, et 
getElementsByClassName (tant dans document que dans Element), ce qui en pratique 
signifie que dans la vaste majorite des cas, ces methodes sont en acces direct sur les 
elements manipules. Sur un tel element elt, au lieu de faire : 

El ement . methodeSympa(el t) 

Element. autreMethodeSympa(elt, argl, arg2.) 

Vous pouvez directement faire : 

elt. methodeSympaO 

elt. autreMethodeSympa (argl, arg2...) 

Ce qui est plus sympathique, plus oriente objet, et plus court ! 

Nous y reviendrons dans la section consacree a El ement. Methods. D'ici la, gardez 
simplement ceci a l'esprit : 

• Partout ou j'indique qu'une fonction prend en argument un element (ou plu- 
sieurs), vous pouvez passer soit un element existant, soit son ID : de tels argu- 
ments sont toujours utilises au travers de la fonction $, que nous allons voir dans 
un instant. Ces elements sont done etendus quoi qu'il arrive. 

• Quand j'ecris qu'une fonction renvoie un « element etendu » (ou un tableau de 
tels elements), ces elements sont dotes directement des methodes du module 
Element. Methods. 
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Alias 



Dans un souci de confort maximal, Prototype donne parfois des alias a certaines 
methodes, lorsque celles-ci existent frequemment sous deux noms differents dans les 
bibliotheques les plus repandues. Ainsi, collect et map sont synonymes, de meme 
que detect et find, select et findAll, ou encore include et member. L'objectif est 
de vous permettre d'utiliser une methode par un nom qui vous est familier, pour faci- 
liter votre apprentissage. 

Dans de tels cas : 

• Je precise les deux noms dans les titres de section. 

• J'indique dans le corps du texte que les methodes sont des alias. 

• Je precise 1' alias dans les blocs de syntaxe a l'aide d'un slash (/), comme ceci : 



objet.noml/nom2 (arguments) 



Comment utiliser Prototype ? 

C'est tres simple. Prototype est fourni sous la forme d'un unique fichier de script, 
prototype, js, d'environ 61 Ko (moins d'une seconde de telechargement, etle cache 
de votre navigateur le gardera bien au chaud par la suite). II vous suffit de charger ce 
script depuis l'en-tete de votre page (X)HTML, de preference avant les autres 
scripts, ces derniers ayant tout interet a s'en servir : 

<head> 

<script type=" text/ javascript" src="... /prototype. js"x/script> 
</head> 

C'est tout ! 

Enfin, sachez que l'archive des codes source pour ce livre, disponible sur le site des 
editions Eyrolles, contient de nombreuses pages completes d'exemples pour 
l'ensemble des fonctionnalites presentees dans ce chapitre. Je vous invite a la tele- 
charger et a la decompresses si ce n'est deja fait, pour pouvoir decouvrir chaque objet 
en action, en plus des exemples succincts contenus dans le texte. 
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Vous allez aimer les dollars 

Loin de moi l'idee de vous taxer de mercantilisme, mais il se trouve que Prototype a 
choisi, pour des raisons de confort, de fournir ses fonctions les plus utiles (que vous 
trouverez vite indispensables, voire incontournables !) sous des noms les plus courts 
possibles. Le meilleur moyen pour eviter les conflits avec des noms existants etait 
1'emploi du prefixe $, dont on n'oublie trop souvent qu'il est autorise comme carac- 
tere d'identifiant en JavaScript (ECMA-262, 7.6§2). 

II existe done six fonctions globales d'interet majeur (cinq en Prototype 1.4.0) : $ 
(oui, juste $ ! II devient difficile de faire plus court, et done plus discret, dans votre 
code !), $A, $H, $F, $R et $$. Pour les decrire, je vais parfois devoir faire appel a des 
concepts qui seront decrits plus loin dans ce chapitre, mais cela ne devrait pas poser 
de problemes de comprehension. 

La fonction $ facilite 1'acces aux elements 

C'est sans conteste la fonction la plus utilisee de Prototype. Son objectif : vous permettre 
d'acceder aux elements du DOM par leur ID, et reduire au maximum les cas particuliers 
et les tests. Je vais m'etendre un peu sur sa description, car elle constitue vraiment une 
pierre angulaire de Prototype, et on l'utilise souvent en-dessous de ses capacites. 

Void ses invocations possibles : 

$(id) -> objEtendu 

$(obj) -> objEtendu 

$(id, id, obj...) -> [objEtendu, objEtendu, objEtendu...] 

A l'avenir, je resumerai ce genre de possibilites comme ceci : 
SYNTAXE 



$( (id /obj .)...) -> objEtendu / [objEtendu...] 



Si vous lui passez un ID (une String), elle recupere 1' element avec un 
document. getElementByld. Sinon, elle considere que vous lui passez en realite l'ele- 
ment lui-meme. Dans tous les cas, elle enrichit 1' element si besoin pour s' assurer que 
vous recuperez au final un element etendu. 

La plupart des fonctions de Prototype qui acceptent des elements en arguments com- 
mencent par les passer a $, histoire d'accepter tant des ID que des elements deja recu- 
peres, et d'etre certaines d'utiliser leur version etendue. Je ne preciserai done plus, a 
l'avenir, qu'une fonction prend un ID ou un element : je dirai juste « un element ». 
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Si vous ne lui avez passe qu'un element, elle vous renvoie l'element etendu. Si elle a 
re9u plusieurs arguments, elle renvoie un tableau des elements etendus correspon- 
dants. Si vous souhaitez constituer un tableau d'elements, il est done inutile de faire : 

// Code inutilement complexe ! 

var items = [] 

i terns [0] = $('item0') : 

i terns [1] = $('iteml') ; 

items [2] = $('item2'); 

Preferez : 

// Code bien plus pratique 

var items = $('itemO', 'iteml', 'item2'); 

La fonction $A joue sur plusieurs tableaux 

Nous allons le voir dans quelques pages, l'objet natif JavaScript Array est tres deve- 
loppe par Prototype, qui y incorpore notamment le module Enumerable. Un tableau 
est done bien plus puissant que la plupart des collections renvoyees par le DOM 
(notamment les objets NodeList et HTMLCollection), qui n'offrent pour la plupart 
que les proprietes length et item. 

C'est pourquoi la fonction $A est importante, et souvent utilisee. Elle prend un argu- 
ment susceptible d'etre transforme en tableau, et en fait un objet Array digne de ce 
nom, dote de toutes les extensions dues a Enumerable ! 

SYNTAXE 

I $A(obj) -> tableau 

Reste a savoir ce qui constitue un argument susceptible d'etre transforme en tableau. 
$A fonctionne comme ceci : 

1 Si on lui passe null ou undef i ned, elle renvoie un tableau vide. 

2 Si l'objet recu implements la methode toArrayO, elle utilise cette methode. Cela 
permet a nos classes de controler leur transformation en tableau, si necessaire. 
C'est notamment le cas de tout objet incorporant le module Enumerabl e. 

3 Sinon, l'objet passe doit disposer d'une propriete 1 ength et de proprietes d'indice 
numerique, afin de pouvoir etre indexe comme un tableau. Chaque propriete a 
laquelle on accedera ainsi sera ajoutee au tableau resultat. 
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Void un exemple complet de tous les cas d'utilisation : 
Listing 4-2 $A dans tous ses etats ! 

$A(nu"l"l) 

// => [] 

$A() 

// => [] 

$A([]) 

// => [] 

$A(['et\ 'hop' , 'facile !']) 

// => ['et\ 'hop', 'facile !'] 

var buddy = { 

fi rstName: 'Ami r ' , 
lastName: 'Jaballah', 

toArray: functionC) { 

return [this.fi rstName, this. lastName] ; 
} 

}; 

SA(buddy) 

// => ['Amir', 'Daballah'] 



var 


convoluted = 


{ 




0: 


'eh bien' 


i 




1: 


'voila un 


exemple' , 




2: 


'pour le 


moins tordu ! 




length: 3 





}; 

SA(convoluted) 

// => ['eh bien', 'voila un exemple', 'pour le moins tordu !'] 



La fonction $H, pour creer un Hash 

Nous verrons plus loin que Prototype definit un objet sympathique, Hash, qui repre- 
sente un tableau associatif (un peu comme java.util .HashMap ou les tableaux de 
PHP, par exemple). Si vous avez lu attentivement le chapitre 2, vous savez qu'un 
objet JavaScript est, essentiellement, un tableau associatif dont les cles sont les noms 
des proprietes, tandis que les valeurs sont... eh bien, les valeurs des proprietes. Au 
premier abord, Hash n'y ajoute done rien. 

Nous verrons en realite que si. Et e'est un type de donnees si frequemment utilise qu'il 
dispose de sa propre fonction de conversion, $H. En realite, l'un ne va pas sans 1' autre : 
il n'existe pas d'autre moyen que cette fonction pour obtenir une instance de Hash. 
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SYNTAXE 
$H(/objetJ) -> Hash 

On peut done creer un Hash vierge simplement avec $H(), ou obtenir la version Hash 
d'un objet existant pour l'examiner plus confortablement, en faisant $H (objet). La 
fonction s'assure par ailleurs que l'objet resultat incorpore le module Enumerable, ce 
qui ajoute encore aux possibilites. 

La fonction $F, des valeurs qui sont les votres 

Si vous avez deja essaye de recuperer de facon generique la valeur d'un champ, vous 
savez que ce n'est pas si trivial. La plupart des types de champs fournissent une pro- 
priete value, mais on ne doit pas la prendre en compte pour des cases a cocher et 
boutons radio decoches, et select souleve plusieurs questions, suivant qu'il autorise 
une selection multiple ou non, ou qu'on utilise MSIE et que la propriete val ue de ses 
options est mal implementee. Dans le dernier exemple du chapitre precedent, le code 
source de la fonction getFieldValue illustre bien cette complexite. 

Avec Prototype, il suffit d'ecrire $F(element). C'est tout. Je le reprends ci-dessous 
comme code individuel, pour vous faciliter la lecture en diagonale a l'avenir : 

SYNTAXE 
$F(element) -> valeurEnTexte / [valeurEnTexte...] 

Petite precision toutefois : si l'element indique est un select a selection multiple, on 
recupere un tableau des valeurs pour les options selectionnees. 

La fonction $R et les interval les 

Un des objets sous-utilises de Prototype est ObjectRange, qui permet de representer un 
intervalle de valeurs pour n'importe quel objet, du moment que celui-ci fournit une 
methode succ(). La maniere la plus simple de creer un ObjectRange est d'utiliser la 
fonction $R. C'est tees utile pour separer une definition de boucle de son utilisation. 

Nous reviendrons sur $R dans la documentation d'ObjectRange, mais voici tout de 
meme sa syntaxe : 

SYNTAXE 
$R(debut, finf, finExclue = false]') -> ObjectRange 
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L'objet ObjectRange renvoye represente une iteration entre debut et fin, laquelle 
peut etre exclue si vous precisez un troisieme argument true. Exemple : 

var loop = $R(1, 42) ; 

"loop. each (functi on (i) { // appelee pour i de 1 a 42 } ) 

La fonction $$ et les regies CSS 

Apparue avec Prototype 1.5.0, $$ permet de recuperer tous les elements correspon- 
dant a des regies CSS. II s'agit en fait une fonction d'enrobage autour du nouvel objet 
Selector, qui represente, comme son nom l'indique, un selecteur CSS. La syntaxe 
est la suivante : 

SYNTAXE 

|j $$(regle...) -> [objEtendu...] 

On recupere un tableau de tous les elements correspondants aux diverses regies. 
Attention toutefois a l'emploi de plusieurs regies : si des elements correspondent a 
plusieurs de ces regies, ils apparaitront plusieurs fois dans le tableau resultat. Les ele- 
ments retournes sont garantis etendus, comme pour $. 

Si vous souhaitez, pour des raisons de performances, conserver une regie precompiled 
dans un Selector pour l'utiliser de multiples fois, sachez que le constructeur de 
Selector ne gere pas le selecteur d'elements descendants (l'espace) : c'est $$, via 
Selector. findChildElements, qui utilise une astuce pour implementer ce selecteur a 
moindre cout. Nous reviendrons dans la section dediee a Selector sur les syntaxes 
prises en charge directement par celui-ci. 

Void un exemple de code qui masque tous les paragraphes ayant une classe toggle 
dans un conteneur d'lD demo : 

$$('#demo p. toggle') .each (function (p) { 

p.hideO; // hide() disponible car p est un element etendu 

}); 

Jouer sur les iterations avec $break et $continue 

Nous allons aborder tout au long de ce chapitre de nombreuses methodes encapsu- 
lant des iterations, par exemple each, collect, inject ou map. Ces methodes ont 
recours a des iterateurs pour traiter tour a tour les objets sur lesquels on boucle. 
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SYNTAXE 

throw $break; 
throw $continue; 

Dans une boucle classique, le langage fournit deux moyens de court-circuit, presents 
dans de nombreux autres langages et signales au chapitre 2 : break et continue. Le 
premier « casse » la boucle, 1' execution continuant a la premiere instruction apres la 
boucle. Le second court- circuite juste le tour courant, faisant immediatement passer 
la boucle a l'iteration suivante. 

Lorsqu'on utilise des iterateurs, ces mots reserves de JavaScript ne nous sont plus 
d'aucune utilite, puisque le code realisant la boucle et celui realisant le traitement sont 
dans deux fonctions distinctes : la methode d'iteration et l'iterateur, respectivement. 

Afin de vous fournir neanmoins ces possibilites de court-circuit, Prototype definit 
done deux « exceptions globales » : Sbreak et Scontinue. Pour obtenir un resultat 
equivalent aux mots reserves, il vous suffit dans votre iterateur de lancer 1' exception 
correspondante. 

Void par exemple un code qui recupere dans une liste les 5 premiers candidats ayant 
plus de 15 de moyenne, et court-circuite l'iteration des ce nombre est atteint. 

Listing 4-3 Court-circuit dans un iterateur avec Sbreak 

// Chaque candidat a des proprietes name et grade, et candidates 
// est un gros tableau de candidats. 
function get5Fi rstCoodCandidates(candidates) { 
var count = 0; 
var result = [] ; 
candidates. each (function (c) { 
if (c. grade >= 15) { 
result. push(c) ; 
if (5 == ++count) 
throw Sbreak; 
} 

}); 

return result; 
} // get5Fi rstCoodCandi dates 
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Extensions aux objets existants 

J'ai classe les apports de Prototype en deux grandes categories : d'abord les extensions 
aux objets existants, ensuite les ajouts purs et simples. Nous allons voir les extensions 
d'abord, parce qu'il s'agit sans doute la du plus grand impact sur votre code. En effet, 
il s'agit d'objets dont vous croyez connaitre toutes les possibilites, car ils vous sont 
familiers. Le risque de sous- exploiter leurs nouvelles capacites est done eleve. Et ce 
serait vraiment dommage... 

Un Object introspectif 

Object est un espace de noms qui fournit quelques methodes sympathiques. 
SYNTAXE 

Object .clone (ob jet) -> cloneDeObjet 

Object .inspect(objet) -> representationString 

Object .keys (ob jet) -> Enumerable 

Object .values(objet) -> Enumerable 

Object est dote d'une petite methode nommee inspect, destinee aux developpeurs 
web en train de mettre leur code au point. Elle tente de fournir une representation 
textuelle la plus efficace possible ; en effet, la representation par defaut des objets 
sous forme de String laisse souvent a desirer. 

Ainsi, les tableaux apparaissent soit sous forme de leurs valeurs separees par des vir- 
gules (done un affichage totalement vide pour un tableau vide, ou incomprehensible 
pour ['','',' ' , '\t\n']), soit sous la tres inutile forme « [Array] »... 

String ne fait guere mieux. undefined et null sont le plus souvent invisibles, et les 
objets, n'en parlons pas. 

Void comment precede Object, inspect : 

• null et undefined donnent 'null ' et 'undefined'. Enfin, en theorie, parce qua 
l'heure actuelle, l'utilisation malheureuse de == au lieu de === fait que les deux 
donnent 'undefined'... 

• Si l'objet dispose d'une methode inspectO, celle-ci est appelee (Prototype en 
fournit pour String, Enumerable, Array, Hash et Element, ce qui couvre l'essentiel 
des besoins). 

• A defaut, la methode toStringO est appelee. Outre celles specifiques aux objets 
Element. ClassNames et Selector, il faut savoir que tout objet JavaScript a par 
defaut une methode toStringO, et ce depuis toujours (JavaScript 1.0). 
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Comparez quelques exemples de representation standard avec toStringO et de 
resultat avec i nspect Q . Vous allez sentir la difference en termes de debogage : 



Listing 4-4 toStringO versus inspect() 

var tableau = [ '', 'Salut', 'C\'est genial 
var obj = { nom: 'Christophe' , age: 28 }; 
var objH = $H(obj) ; 

alert(tableau + '\n' + obj + '\n' + objH); 
alert(Object.inspect(tableau) + '\n' + 
Object .inspect (obj) + '\n' + 
Object .inspect(objH)) ; 

Voici les resultats : 



'\n' , "TDD"' ] ; 



Figure 4-1 

toStringO versus inspectQ 
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II y a deja du mieux... En combinant avec l'objet global console fourni par Firebug 
(voir chapitre 2), on a de quoi faire. 

Les methodes keys() et values () permettent de traiter un objet comme un hash 
d'associations cle/valeur : elles renvoient un tableau des noms de proprietes, ou de 
leurs valeurs, respectivement : 

Object. keys(tableau) // => [0, 1, 2, 3] 
Object . keys(obj) // => [ 'nom', 'age' ] 
Object. values(obj) // => [ 'Christophe', 28 ] 

Enfin, la methode clone fournit, comme son nom l'indique, un clone exact de l'objet 
source. 



Gerer correctement le binding 

On a vu en detail, au chapitre 2, la question epineuse du binding. II s'agit principale- 
ment de pouvoir passer une methode en argument, pour execution ulterieure, sans 
que celle-ci perde le lien qui l'attache a un objet particulier. 

Prototype fournit deux ajouts a l'objet Function qui s'occupent specifiquement du 
binding : bind et bindAsEventListener. 
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SYNTAXE 



monOb j et . methode . bi nd(monOb j et [, arg..J) 

monOb j et . methode . bi ndAsEvent Li stener (monOb jet [ , arg..J) 

La methode bi nd permet de « transformer » une methode classique en methode a 
binding garanti, c'est-a-dire sur laquelle this vaudra toujours ce que vous aurez pre- 
cise au moment du bi nd. Qui plus est, elle peut lui fournir des arguments preremplis, 
auxquels les arguments d'invocation seront ajoutes (pas de remplacement !). 

Voyez l'exemple suivant. 
Listing 4-5 Avec ou sans bind... 

var obj = { 

location: 'Paris, France', 

getLocation: functionO { 
return this. location ; 
} // getLocation 

}; 

function show(getter) { 

alert(getterO) ; 
} // show 

show(obj .getLocation) ; 

// => this global (window) : window. location => l'URL de la page 

show(obj . getLocation . bi nd(obj)) ; 

// => this sera bien obj : obj. location => « Paris, France » 

Ce qu'il fautbien comprendre, c'est que bind renvoie une nouvelle fonction, qui peut 
etre appelee en lieu et place de l'ancienne autant de fois qu'on veut. 

On trouve un exemple de bi nd avec un argument predefini dans l'etude de cas sur 
l'API REST Flickr au chapitre 8, pour l'objet de chargement parallele gXSLT. 

II existe un cas particulier : celui des gestionnaires d'evenements. Lorsque vous uti- 
lisez des fonctions globales comme gestionnaire, vous n'avez rien de special a faire. 
Toutefois, quand vous passez une methode et que celle-ci a besoin de referencer son 
instance conteneur avec this, il est important de fournir un enrobage approprie de la 
methode a l'aide de bindAsEventLi stener. En effet, bind ne suffira pas sur de vieux 
navigateurs, car ils ne fourniraient pas toujours a votre gestionnaire l'evenement cou- 
rant comme premier argument. 
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La aussi, un exemple met les choses au clair : 
Listing 4-6 Avec ou sans bindAsEventListener... 

var obj = { 

location: 'Paris, France', 

handleLeftClick: function (event) { 
if (! event) { 

alert("Ah, pas d'objet evenement . . . ") ; 
return ; 
} 

Event. stop(event) ; 
if (Event. isLeftClick(event)) 

alert(' Location : ' + this. location) ; 
} // handleLeftClick 

}; 

Event. observeC btnTestBasic' , 'click', obj .handleLeftClick) ; 
// => this = bouton : btnTestBasic. location => undefined 
Event. observeC btnTestBind' , 'click' , 

obj . handleLeftClick. bind(obj)) ; 
// => this correct, mais sur de vieux navigateurs, argument 
// event manquant... 
Event. observeC btnTestBAEL' , 'click' , 

obj .handleLeftClick.bindAsEventListener(obj)) ; 
// => this correct, event garanti : -) 



Des droles de numeros 

Le venerable objet Number, utilise par tous les nombres, y compris les litteraux, dis- 
pose de quelques menues extensions. 

SYNTAXE 



variableNombre. toColorPartO -> HexaDeuxCaracteres 

variableNombre. succ() -> nombreSuivant 

variableNombre. times (function (index) { ... }) 

(literal Entier) .toColorPartO 

(literal En tier) .succ() 

(literalEntier) .times(function(index) {...}) ; 

Tout d'abord la methode toColorPartO, qui renvoie la representation hexadecimale 
du nombre. Elle est surtout censee etre utilisee sur des nombres de a 255, et des- 
tinee a composer la representation CSS d'une couleur. 
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Void un exemple typique avec Array. inject, que nous etudierons plus loin : 

var rgb = [ 128, 255, ] ; 

var cssColor = rgb.inject('#' , function(s , comp) { 
return s + comp.toColorPartO ; 

}); 

// cssColor == '#80ff00' 

Les methodes succ() et times(iterator) permettent aux nombres de realiser des 
iterations dans le plus pur style Ruby. En effet, la methode times synthetise une ite- 
ration de jusqu'au nombre (exclu, ou borne ouverte si vous avez l'esprit mathema- 
tique). Elle utilise pour ce faire un ObjectRange, qui a besoin que l'objet d'origine 
implemente une methode succ, laquelle fournit la valeur suivante a chaque tour (ici, 
succO renvoie la valeur appelante plus un). 

Ainsi, pour realiser une boucle de zero a n exclu, au lieu de faire : 

I for (var index = 0; index < n; ++index) 
// code 

On peut faire : 

n .times (function (index)) { 

// code 
} 

Ce qui est plutot risible, vous ne trouvez pas ? « n times »... 

Attention toutefois : en raison de la syntaxe des nombres, qui utilisent deja le point ( . ) 
comme separateur decimal, on ne peut pas invoquer une methode directement sur un 
litteral entier : 5.succ() genere une erreur de syntaxe. On doit done, comme men- 
tionne plus haut dans le bloc de syntaxe, recourir a une astuce pour lever l'ambiguite 
au niveau de l'analyseur. La plus simple est d'encadrer le nombre entre parentheses. II 
en existe deux autres, que je vous laisse chercher si vous etes du genre curieux... 

Un objet String tres enrichi 

Stri ng est l'un des objets les plus enrichis par Prototype. L'autre est Array, que nous 
examinerons tout a l'heure. II faut avouer que malgre la relative richesse de ses 
methodes originelles, String a pas mal de lacunes au regard de son usage courant. 
En raison du grand nombre d'extensions, j'ai decoupe l'examen des nouvelles 
methodes par theme. 

Toutes les methodes de modification renvoient en realite une nouvelle version 
modifiee : elles ne touchent pas a la chaine de caracteres originale. 
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Retraits de caracteres : strip, stripTags, stripScripts, truncate 

Ces quatre petites methodes renvoient une version purgee ou tronquee. 
SYNTAXE 



chaine.stripO -> chaine 

chaine. stripTagsO -> chaine 

chaine. stripScriptsO -> chaine 

chaine. truncate^ [longueur = 30[, troncature 



'J J) -> chaine 



La methode stripO equivaut au plus classique trimO : elle retire les espacements 
(whitespace) en debut et en fin de texte. 

La methode stripTags () purge le texte de toute balise ouvrante et fermante, attri- 
buts compris. Ne pas confondre avec escapeHTML. 

La methode stripScriptsO se contente de supprimer les balises script etleur con- 
tenu, ce qui est tres utile en termes de securite. Prototype s'en sert aussi beaucoup en 
interne, pour inserer un contenu HTML : il retire systematiquement les element 
scripts pour les evaluer a part, immediatement apres insertion. 

La methode truncate est un tout petit peu plus complexe, car elle dispose de deux 
arguments optionnels. II s'agit ici de tronquer un texte a une longueur maximale, en 
remplacant la partie tronquee par un texte de substitution. On imagine facilement 
l'interet dans des affichages a largeur fixe. Largument longueur, qui vaut 30 par 
defaut, donne la longueur maximale du texte resultat (texte de troncature compris), 
et le second argument indique le texte de troncature, qui vaut par defaut ' . . . ' (trois 
caracteres point). 

Void quelques exemples d'utilisation. 
Listing 4-7 Methodes de retrait de caracteres 

var spacedOutText = ' Bonjour monde\n ' ; 
var markup = '<hl>Texte balise</hl>\n' + 

'<p>Vous voyez, il y a des <strong>balises</strong>.</p>' ; 
var scriptMarkup = '<hl>Texte balise</hl>\n' + 

'<p>Vous voyez, il y a des <strong>balises</strong>.</p>\n' + 

'<script type="text/javascript">\n' + 

'window. location .href = "http://site-de-pirate.com/ 
pique_mon_ip" ;\n' + 

'</script>\n' + 

'<p>Fin du balisage</p>' ; 
var longText = 'Ceci est un texte un peu trop long pour moi ' ; 
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spacedOutText.stripO 

// 'Bonjour monde' 

markup . stripTagsO 

// 'Texte balise\nVous voyez, il y a des balises. 1 

scri ptMarkup . stripTagsO 

// 'Texte balise\nVous voyez, il y a des balises. \n\n ' + 

// 'window. location. href = ...\n\n' + 

// 'Fin du balisage' 

scri ptMarkup . stripScriptsO 

// '<hl>Texte balise</hl>\n' + 

// '<p>Vous voyez, il y a des <strong>balises</strong>.</p>\n ' + 

// '\n<p>Fin du balisage</p>' 

1 ongText . truncateO 

// => 'Ceci est un texte un peu tr...' 

1 ongText . truncate(42) 

// => 'Ceci est un texte un peu trop long pour...' 

1 ongText. truncate(42, '...') 

// => 'Ceci est un texte un peu trop long pour m...' 

Transformations : sub, gsub, escapeHTML, unescapeHTML, camelize 

Ces methodes permettent d'effectuer des remplacements a comportement variable 
ou fixe sur le texte. 

SYNTAXE 

chai tie. camel ize() -> chaine 

chaine.escapeHTMLO -> chaine 

chaine. gsubCpattern, replacement | iterator) -> chaine 

chaine.subCpattern, replacement | iterator/^, count = 1J) -> chaine 

chaine. unescapeHTMLO -> chaine 

Commencons par les plus simples. La methode escapeHTML () « desamorce » un code 
HTML : le HTML est utilise litteralement au lieu d'etre interprete par le naviga- 
teur. La methode unescapeHTMLO fait exactement l'inverse. 

La methode camel ize() transforme un texte minuscule compose de parties separees 
par des tirets (-) en texte Came/Case minuscule. II ne s'agit pas ici d'une transforma- 
tion specifique aux textes a destination des utilisateurs : on cible specifiquement le 
passage d'un nom de propriete CSS a son equivalent dans le DOM niveau 2 Style. 
D'ailleurs, cette methode est utilisee en interne par les methodes getStyle et 
setStyle de Element. Methods, que nous etudierons plus loin dans ce chapitre. 

Les methodes les plus avancees sont sub et gsub. En surface, elles semblent globale- 
ment equivalentes a la methode existante replace. Elles sont en realite un peu plus 
puissantes. 
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Prenons d'abord gsub. Elle va remplacer toutes les occurrences du motif pattern 
trouvees dans la chaine. Ce motif est une expression rationnelle fournie de preference 
directement comme objet RegExp, par exemple /\w+/. Ce qui peut varier, c'est le 
remplacement. On peut passer un texte ou un iterateur. Dans le texte, il est possible 
de referencer les groupes isoles par le motif a l'aide d'une syntaxe inspiree de Ruby : 
#{numero}. L'iterateur, en revanche, sera appele pour chaque correspondance, avec 
1' objet la representant en argument. II doit renvoyer le texte de remplacement. 

Beaucoup de gens ignorent que la fonction native Stri ng . match renvoie non pas une 
chaine de caracteres, mais un objet MatchData, qui decrit la correspondance. Cet 
objet est une sorte de tableau, dont l'index renvoie la correspondance totale, et dont 
les indices supplementaires renvoient les groupes isoles par les couples de parentheses 
du motif. 

Void un exemple : 

var md = 'salut les grenouilles ' . match (/a(.)(\w+)/) ; 
md[0] // => 'salut' 
md[l] // => 's' 
md[2] // => 'alut' 

Enfin, un mot sur la methode sub : elle est similaire a gsub, a ceci pres quelle peut ne 
remplacer qu'une partie des occurrences (par defaut, seulement la premiere), a l'aide 
de son argument optionnel count. 

Voyons quelques exemples de nos nouvelles methodes. 
Listing 4-8 Transformations de texte 

'border' . camel ize() 

// => 'border' 

'border-style' . camel ize() 

// => 'borderStyle' 

'border-left-color' .camelizeO 

// => 'borderLeftColor' 

'<hl>Un joli titre</hl>' .escapeHTMLO 

// => '<hl>Un joli titre&lt ;/hl> ' 

'<hl>Un joli titre</hl> ' .unescapeHTMLO 

// => '<hl>Un joli titre</hl>' 

'je m\'appelle charles-edouard' .gsub(/[aeiouy]/, '-') 

// => 'j- m\'-pp-ll- ch-rl-s--d rd' 

'je m\'appelle charles-edouard' .gsub(/[aeiouy]/, '[#{0}]') 
// => 'j[e] m\'[a]pp[e]ll[e] ch[a] rl [e]s-[e]d[o] [u] [a] rd' 
'je m\'appelle charles-edouard' .gsub(/[aeiouy]/, '\##{0}') 
// => 'j#e m\'#app#ell#e ch#arl#es-#ed#o#u#ard' 
'charles-edouard de la prutenatilde' .gsub(/\w+/, 



Prototype : simple, pratique, elegant, portable ! 

Chapitre 4 



function (match) { 

return match [0] .charAt(O) .tollpperCaseO + 
match [0] .substring(l) .toLowerCase( 
}) 

// => 'Charles-Edouard De La Prutenatilde' 
'charles-edouard de la prutenatilde' .sub(/\w+/> '[#{0}]') 
// => ' [charles]-edouard de la prutenatilde' 
'charles-edouard de la prutenatilde' .sub(/\w+/, '[#{0}]', 2) 
// => ' [charles]- [edouard] de la prutenatilde' 

Fragments de scripts : extractScripts, evalScripts 

La methode extractScripts est presque exactement l'inverse de stripScripts : elle 
renvoie un tableau des portions de script du texte (sans leurs balises script). La 
methode evalScripts pousse cette logique un cran plus loin : elle extrait les scripts 
et les execute a tour de role avec eval . 

SYNTAXE 

chaine.extractScriptsO -> [texteScript...] 
chaine.evalScriptsO -> [resultatScript...] 

II est assez probable que vous n'utiliserez jamais ces methodes directement. Elles 
sont en revanche tres utilisees, en interne, par les mecanismes d'insertion (espace de 
noms Insertion, decrit vers la fin du chapitre) et sur les contenus (X)HTML recu- 
peres par les requetes Ajax. 

Conversions et extractions : scan, toQueryParams, parseQuery, toArray, 
inspect 

Commencons par les methodes simples. Nous avons deja evoque toArrayO en etu- 
diant la fonction $A. Une Stri ng peut ainsi etre traitee comme un tableau de caracteres. 

SYNTAXE 

chai ne. inspect( [useDoubleQuotes = fa7sej) -> chaine 
chaine. parseQuery /toQueryParams () -> objet 
chaine.scanCpattern, iterator) -> laMemeChaine 
chaine.toArrayC) -> [caractere...] 

La methode inspectO a aussi ete vue lorsquej'ai presente Object, inspect. Ici, elle 
« echappe » simplement les backslashes et apostrophes, encadrant le tout entre guille- 
mets simples ou doubles (je trouve d'ailleurs que ce n'est pas suffisant : a mon gout, 
elle devrait aussi echapper les retours chariot, sauts de ligne et tabulations). 
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La methode parseQuery analyse une query string, cette portion d'une URL qui 
demarre avec le point d'interrogation (?) et s'arrete eventuellement avec l'ancre (#). 
C'estla que sont situes les parametres transmis en GET. La methode parseQuery extrait 
cette portion d'une URL et la decoupe pour renvoyer un objet avec une propriete par 
parametre, et bien sur les valeurs correctement definies pour chaque propriete. 

La methode toQueryParams est en realite un alias de parseQuery : les deux noms 
referencent la meme methode. 

Enfin, la methode scan est une variante restreinte de gsub, qui ne sert qua trans- 
mettre chaque correspondance d'un motif a un iterateur. Elle renvoie la chaine d'ori- 
gine au lieu d'un tableau de resultats. 

Quelques petits exemples ? Allez, d'accord. 
Listing 4-9 Conversions et extractions 

var query = '?fi rstName=Christophe&age=28' .parseQueryO ; 
al e rt (Ob ject .inspect ($H (query))) ; 

// => '<#Hash:{'firstName' : 'Christophe' , 'age': 28}>' 
alert (Object .inspect ('sal ut' .toArrayO)) ; 
// => ['s' , 'a' , '1 ' , ' u' , 't'] 

alert(Object .inspect("Salut les p'tits loups \\o/ !")); 
// => 'Salut les p\'tits loups \\o/ !' 
var oCounts = [] ; 

'foo boo boz' .scan(/o+/, function (match) { 
oCounts . push(match [0] .length) ; 

}); 

alert (Object .inspect (oCounts)) ; 
// => [2, 2, 1] 



Des tableaux surpuissants ! 

Avant toute chose, il faut dire que Array incorpore le module Enumerable, que nous 
allons voir dans la section dediee aux nouveautes apportees par Prototype. De base, 
un tableau dispose done de toutes les possibilites fournies par ce module, ce qui fait 
deja beaucoup. 

Cette section se penche sur les methodes qui sont ajoutees en plus de celles du 
module Enumerable. Et comme il y en a beaucoup, je les ai done classees par theme. 

Conversions : from, inspect 

La methode Array . from est un alias de la fonction $A. Vous pouvez utiliser alternati- 
vement l'une ou l'autre syntaxe, suivant votre esthetique personnelle. 
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La methode inspectO a deja ete presentee en etudiant Object. inspect. Elle ren- 
voie ici une representation entre crochets, les elements etant separes par une virgule 
et une espace, chaque element etant represente par un Obj ect . i nspect sur sa valeur. 
On obtient done un texte tres proche de l'equivalent litteral JavaScript. 

SYNTAXE 

Array. from(obj) -> tableau 
tableau. i nspect () -> chaine 

Quelques exemples : 

Array. from(' hello') 

// => ['h\ 'e', 'T, 'V , 'o'] 

Array. from({0: 'c\'est', 1: 'vraiment' , 2: 'bizarre', length: 3}) 

// => ['c\'est', 'vraiment', 'bizarre'] 

[ 42, "hello", Number. POSITIVE_INFINITY, [] ]. inspectO 

// => [42, 'hello', Infinity, []]' 

Extractions : first, last, indexOf 

Quelques petites methodes toutes simples ont ete ajoutees pour unifier faeces aux 
elements. 

SYNTAXE 

tableau. firstO -> objet 
tableau. last() -> objet 
tableau. indexOf (obj) -> nombre 

La methode f i rst() renvoie le premier element, ou undef i ned si le tableau est vide. 
La methode lastO raccourcit enfin la syntaxe penible tab [tab. length - 1], et 
renvoie done le dernier element (ou undef i ned si le tableau est vide). 

La methode i ndexOf , definie par ailleurs dans le standard JavaScript, mais souvent 
manquante dans la pratique, raccourcit l'eternelle boucle de recherche en renvoyant 
la position de l'argument dans le tableau. La comparaison se fait avec l'operateur ==, 
et la fonction renvoie -1 si la valeur n'a pas ete trouvee. 

[].firstO 

// => undefined 

[1, 2, 3].firstO 

// => 1 

[1, 2, 3].lastO 

// => 3 
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['salut', 'les', 'grenouilles'] .indexOf ('les') 
// => 1 

['salut', 'les', 'grenouilles'] .indexOf (' LES') 
// => -1 

Transformations : clear, compact, flatten, without, reverse, reduce, uniq 

Pour finir, on dispose de cinq methodes transformant le contenu du tableau. Cer- 
taines produisent un nouveau tableau (resultat tableau dans la syntaxe), d'autres 
modifient le tableau d'origine. 

SYNTAXE 

tableau. clearO -> 1 eMemeTabl eauMai sVi de 

tableau. compact () -> tableau 

tableau. flatten () -> tableau 

tableau. withoutCobj.) -> tableau 

tableau. reverse^ [inline = true]') -> leMemeOuUnAutre 

tableau. reduceO -> tableau | valeur 

tableau. uniqC) -> tableau 

La methode clearO vide le tableau en ramenant sa taille a zero, et renvoie le tableau 
lui-meme. 

La methode compact () cree un nouveau tableau equivalent a l'original dont on aurait 
retire tous les elements null et undefined. 

Tres sympathique, la methode flatten (), est abondamment utilisee en interne par 
Prototype : elle « aplatit » un tableau de tableaux, quel qu'en soit le niveau de profon- 
deur. On obtient l'equivalent d'un parcours en profondeur du tableau d'origine. Nous 
allons l'illustrer dans les exemples. 

La methode without est un filtre bien pratique, qui produit un nouveau tableau equi- 
valent a l'original purge des arguments passes. 

La methode reverse a deux comportements, suivant qu'on lui passe expressement 
f al se ou non. Dans le premier cas, elle produit un nouveau tableau qui est l'inversion 
(ordre inverse) de l'original. Dans tous les autres, elle inverse directement l'original et 
le renvoie. 

La methode reduce reduit un tableau n'ayant qu'un element a cet element lui-meme, 
et un tableau vide a undef i ned. 

Enfin, la methode uniq renvoie le tableau debarrasse de ses doublons. Le tableau n'a 
pas besoin d'etre trie, et son ordre est inchange. 
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Void quelques exemples de ces methodes de transformation : 
Listing 4-10 Transformations de tableaux 

var simple = [ 42, 'salut', NaN, 'les', null, 'grenouilles' ]; 
var complexe = [ 42, [ 'salut', [ NaN ], 'les' ], null, 
[[[ 'grenouilles' ]]] ]; 

simple. reverseO ; 

// => simple : [ 'grenouilles', null, 'les', NaN, 'salut', 42 ] 

simple. reverse(false) 

// => [ 42, 'salut', NaN, 'les', null, 'grenouilles' ] 

// => simple : [ 'grenouilles', null, 'les', NaN, 'salut', 42 ] 

var simple2 = complexe. flatten O ; 

// => simple2 : [ 42, 'salut', NaN, 'les', null, 'grenouilles' ] 

simple2 = simple2 .without(NaN, 'les') .compactO ; 
// => simple2 : [ 42, 'salut', NaN, 'grenouilles' ] 

simple2.clearO ; 
// => simple2 : [] 

[]. reduce () // => undefined 

[l].reduceO // => 1 

[1, 2].reduceO // => [1, 2] 

[1, 2, 3, 7, 2, 5, 7, 4, 8].uniqO // => [1, 2, 3, 7, 5, 4, 8] 

Notez d'abord que le without n'a pas purge le NaN, ce qui nous rappelle que par defi- 
nition, NaN n'est egal a aucun Number, y compris lui-meme ! Or, without utilise l'ope- 
rateur ==. 

Extraire les elements ayant une classe precise 

Parfois, on souhaite simplement recuperer tous les elements ayant, parmi leurs 
classes CSS, une classe precise. Pour ce genre d'extraction, la fonction $$ est inutile- 
ment lourde. Prototype fournit quelque chose de plus rapide : 

SYNTAXE 

document. getElementsByClassName(className, [scope = document. body]') -> 
[eltEtendu...] 



Dormer vie aux pages 

Premiere partie 

On precise une (et une seule) classe CSS. On recupere un tableau des elements cor- 
respondants, garantis etendus. Si vous souhaitez restreindre la recherche a l'interieur 
d'un element particulier, precisez l'element en deuxieme argument. 

Deux exemples fictifs d'invocation : 

var hilited = document. getElementsByClassNameC hilite') ; 
var menuAlternatives = document .getElementsByClassNameC 

'alternative', 'menuBar ') ; 
// On suppose qu'on a ici un conteneur d'lD 'menuBar' 



Modules et objets generiques 

A present que nous avons vu les extensions que Prototype apporte aux objets natifs 
de JavaScript, il est temps d'explorer les objets, modules et espaces de noms existant 
hors des objets natifs, en commencant par ceux repondant a des besoins tenement 
courants qu'ils constituent une sorte de bibliotheque standard generique. 

Nous commencerons par 1' excellent module Enumerable, qui fournit de nombreux 
comportements d'extraction a tout objet fournissant une methode d'iteration speci- 
fique. Nous poursuivrons par Hash, ObjectRange, PeriodicalExecuter, Template et, 
pour finir, Try. 

Enumerable, ce heros 

Enumerable est un module, au sens defini en debut de chapitre. II s'agit d'un ensemble 
de methodes injectables dans un type existant (au travers de l'extension de son proto- 
type), qui ne formulent que quelques dependances sur ce type pour pouvoir fonctionner. 

Avec Enumerable, la dependance est simple : il faut que le type, qui est cense etre un 
conteneur de donnees, dispose d'une methode _each acceptant un iterateur, et que 
cette methode passe a l'iterateur en question toutes les donnees, tour a tour. Sur cette 
base simple, Enumerable construitles nombreuses methodes decrites ci-dessous. 

« Injecter » Enumerable a un type satisfaisant cette contrainte est simple avec 
Prototype : 

Object .extend(LeTypeQuiVaBien. prototype, Enumerable) ; 

C'est exactement ce qui se passe, en interne, pour Array, ObjectRange, 
Element. CI assNames ou encore les objets Hash renvoyes par $H. 

Comme le module est vaste, j'ai la aussi classe les methodes par theme. 
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[.'iteration elle-meme : each 

SYNTAXE 
objetEnumerabl e . each ( i terateur) 

Pour iterer sur un Enumerable, on utilise toujours la methode each publique, jamais 
la methode _each privee, declaree par le type concret sur lequel on a injecte le 
module Enumerable. En effet, c'est la version publique qui prend en charge les excep- 
tions globales Sbreak et Sthrow etudiees plus haut dans ce chapitre. C'est done grace 
a elle qu'il est possible de court- circuiter une iteration de ce type. 

Par ailleurs, each passe en realite deux arguments a l'iterateur : la valeur elle-meme et 
la position dans le conteneur (comme d'habitude, le premier element est a la position 
zero). Par consequent, toutes les methodes acceptant un iterateur dans ce module ont 
le meme comportement. 

Void deux exemples simples d'utilisation : 

['salut', 'les', 'grenouilles' ] .each(function(s) { alert(s); }) ; 

var sum = 0; 

$R(1, 20) .each(function(n) { sum += n; }) ; 

// sum == 210, somme des entiers de 1 a 20 inclus 

Tests sur le contenu : all, any, include, member 

Les methodes any et al 1 sont de plus en plus frequentes dans les bibliotheques de 
conteneurs ; on les trouve d'ailleurs dans les tableaux natifs pour les navigateurs 
Mozilla, et il n'est pas exclu que JavaScript 2.0, le prochain standard, les officialise. 

SYNTAXE 

objetEnumerabl e. all ([iterator]) -> booleen 
objetEnumerabl e.anyC [iterator]) -> booleen 
objetEnumerable.include/member([iterator]) -> booleen 

II s'agit de predicats permettant de verifier si tous les elements d'un conteneur satisfont 
une condition, ou si au moins un d'entre eux la satisfait. C'est extremement pratique 
dans de nombreux cas, par exemple pour verifier qu'un tableau ne contient que des 
nombres, ou que dans une liste censee contenir des elements du DOM, il y a au moins 
un element qui n'est ni null , ni undef i ned. 

Les deux methodes acceptent un iterateur optionnel, qu'on fournit generalement. S'il est 
manquant, on utilise la fonction identite, Prototype. K. Les elements eux-memes sont 
alors traites comme des equivalents booleens (voir le chapitre 2 pour les correspondances). 
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L'iteration est bien sur court- circuitee des que son resultat est determine (al 1 court- 
circuite au premier element insatisfaisant, any au premier satisfaisant). 

Void l'expression des deux tests cites en exemple un peu plus tot : 
if (data. all (function (x) { return 'number' == typeof x; })) 
if (data. any ()) 

Notez l'absence d'iterateur au deuxieme appel : on teste directement les elements. 
Avouez que c'est concis ! 

II existe egalement une methode include (et son alias member, c'est au choix), qui 
permet de tester qu'un conteneur contient bien un objet particulier. La methode ren- 
voie un booleen et court- circuite evidemment l'iteration des quelle a trouve. 

$R(1, 20). include (12) // => true 

$A(document.childNodes) . include (document. body) // => false 

Extractions : detect, find, findAII, select, grep, max, min, pluck, reject 

Les objets enumerables disposent de toute une panoplie d'extractions toutes plus 
pratiques les unes que les autres. 

SYNTAXE 

objetEnumerable.detect/find(iterateur) -> objet 
objetEnumerable.findAll/select(iterateur) -> [objet...] 
objetEnumerable.grep(pattern[, iterateur]) -> [objet...] 
objetEnumerable.max([iterateur]) -> objet 
objetEnumerable.min([iterateur]) -> objet 
objetEnumerable.pluck(nomPropriete) -> [valeurPropriete...] 
objetEnumerable.reject(iterateur) -> [objet...] 

La methode detect (et son alias f i nd) recherche le premier objet satisfaisant l'itera- 
teur dans l'enumeration et le renvoie immediatement (s'il n'a pas ete trouve, elle ren- 
voie undefined). Vous voulez la premiere valeur superieure a 10 dans un tableau de 
nombres ? II suffit d'ecrire : 

desNombres.find(function(n) { return n > 10; }) 

La methode select (et son alias findAII ) ne se contente pas de la premiere valeur, 
mais renvoie l'ensemble des valeurs satisfaisant l'iterateur. A ce titre, elle est 
l'opposee de reject, qui renvoie toutes les valeurs ne satisfaisant pas l'iterateur. 



Prototype : simple, pratique, elegant, portable ! 

Chapitre 4 

Void comment recuperer tous les textes de plus de 42 caracteres, et comment virer 
les NaN : 

desTextes .select(function(s) { return s. length > 42; }) 
desNombres. reject (functi on (n) { return isNaN(n); }) 

La methode grep est une variante particuliere de sel ect, qui applique une expression 
rationnelle a la representation textuelle (methode toStringO, pas inspectO !) des 
objets de 1'enumeration. Elle renvoie un tableau de ceux qui satisfont l'expression 
passee (de preference sous forme d'un objet RegExp). Si un iterateur est precise en 
second argument, il est utilise pour recuperer une valeur derivee de l'objet courant 
plutot que l'objet lui-meme. 

Pour recuperer les textes ne contenant aucune voyelle, ou les longueurs de ceux con- 
tenant au moins trois mots, on procederait ainsi : 

desTextes . grep(/A [ Aaei ouy] *$/i ) 

desTextes. grep(/(\w+(\b |\W+)){3, }/, function(s) { 

return s. length; 
}) 

Les methodes mi n et max parlent d'elles-memes. Sans iterateur, elles travaillent sur 
les objets directement, qui doivent done prendre en charge les operateurs 
relationnels > et <. Un iterateur optionnel permet de rechercher le minimum et le 
maximum d'une valeur derivee plutot que des objets eux-memes. 

Par exemple, voici comment connaitre le premier texte d'une serie dans l'ordre lexi- 
cographique (celui de la table des caracteres), ainsi que la taille du texte le plus long : 

desTextes .minO 

desTextes .max(f unction (s) { return s. length; }) 

Avec un peu d'astuce, on peut obtenir par exemple le plus grand nombre de voyelles 
dans les textes : 

desTextes .max(function(s) { 

return (s.match(/[aeiouy]/ig) || []). length; 

}); 

Si vous comprenez cet exemple, vous pouvez commencer a aller explorer le code 
source de Prototype sans trop hitter... 

Pour finir, la methode pluck permet de recuperer une propriete particuliere pour 
chaque objet de l'enumeration. Cette methode est tres pratique, et largement utilisee 
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en interne par Prototype. Vous voulez un tableau des tallies de tous les textes ? II 
suffit d'ecrire : 



I desTextes .pluck(' length ') 



Transformations et calculs : collect, map, inject, invoke, partition, sortBy 

La frontiere entre extraction et transformation est parfois tenue. Si vous estimez 
qu'une de ces methodes aurait davantage trouve sa place a la precedents section, ou 
reciproquement, vous avez peut-etre raison. Tout depend, en realite, de l'utilisation 
concrete, et les possibilites de combinaison ou d'usage... detourne... sont potentielle- 
ment illimitees. 

SYNTAXE 

objetEnumerable. collect/map(iterateur) -> tableau 
objetEnumerable. inject(accumulateur, iterateur) -> valeur 
objetEnumerable. invoke(nomMethodef, arg...]') -> tableau 
objetEnumerable. partitionCffterateurJ) -> [objVrais, objFaux] 
objetEnumerable. sortBy(iterateur) -> tableau 
objetEnumerable. zip(equivalentTableau...f, iterateur]') -> tableau 

La methode map (et son alias col 1 ect) cree un nouveau tableau ou chaque element 
est le resultat de l'application de l'iterateur a son homologue du tableau original. 
Lorsqu'il s'agit simplement de remplacer un objet par une de ses proprietes, preferez 
pluck, tellement plus simple. Mais pour quelque chose de plus avance, map est incon- 
tournable. Vous voulez la parite de tous les nombres d'un tableau ? II faut ecrire : 

[1, 2, 5, 8, 14] .map(f unction (n) { return == n % 2; }) 

// => [false, true, false, true, true] 

La methode inject est tres utile (nous nous en sommes d'ailleurs deja servis dans 
des exemples precedents, pour Number. toColorPartO par exemple) : elle permet de 
construire une valeur a partir de l'ensemble des objets de l'enumeration. 

On utilise une variable dite accumulateur, qui part d'une valeur initiale fournie en 
premier argument. Ensuite, a chaque valeur de l'iteration, l'iterateur est invoque avec 
la valeur actuelle de l'accumulateur comme premier argument, et 1' objet courant en 
second. L'iterateur doit renvoyer la nouvelle valeur de l'accumulateur. 

La fonction inject renvoie la valeur finale de l'accumulateur. II peut s'agir d'une 
chaine de caracteres, d'un nombre, d'un booleen... Tout depend de vos besoins ! 



Prototype : simple, pratique, elegant, portable ! 

Chapitre 4 

Void par exemple comment etablir la somme et le produit internes d'un tableau de 
nombres : 

desNombres.inject(0, function (ace, n) { return ace + n; }) 
desNombres.inject(l, function (ace, n) { return ace * n; }) 

Notez l'importance de la valeur initiale pour l'accumulateur. Je precise que l'iterateur 
prend en troisieme argument la position de l'objet courant dans le tableau, meme si 
on s'en sert plutot rarement. 

La methode invoke n'est pas sans rapport a pluck. La ou pluck recupere une pro- 
priete, invoke appelle pour chaque objet de remuneration la methode designee, en 
lui passant les eventuels arguments supplementaires, et fournit le tableau des resul- 
tats. Si vous souhaitez par exemple obtenir les 10 premiers caracteres de chaque 
texte, vous pourriez utiliser le map classique : 

jj desTextes .map(function(s) { return s .substring(0, 10); }) 

Ou preferer i nvoke, plus elegant et pas plus lent pour un sou : 
I desTextes .invokeC substring ' , 0, 10); 

La methode partition separe le bon grain de l'ivraie, en produisant deux tableaux : 
celui des objets ayant satisfait l'iterateur (s'il n'est pas fourni, on utilise l'equivalence 
booleenne des objets eux-memes), et celui des autres. C'est une sorte de combinaison 
entre select et reject, mais c'est plus efficace que d'appeler les deux separement. 

var result = desTextes. partition(function(s) { 
return s. length > 10; 

}); 

// result[0] contient les textes assez longs 
// result[l] contient les textes trop courts 

La methode sortBy permet de produire une variante triee du tableau, suivant un cri- 
tere defini par l'iterateur obligatoire (pour trier les objets directement, on dispose 
deja de la methode native sort sur Array). Par exemple, on peut vouloir trier des 
textes par taille : 

I desTextes .sortBy(function(s) { return s. length; }) 

La derniere methode de cette section, zip, est assez complexe. II s'agit de « coller » 
des tableaux les uns aux autres, cote a cote si Ton peut dire. La methode produit dans 
tous les cas un nouveau tableau resultat. 
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Imaginons par exemple que vous ayez un tableau d'identifiants utilisateur, et un autre 
de mots de passe. Vous souhaitez produire un tableau de paires : identifiant + mot de 
passe. Pour cela, vous avez plusieurs moyens. Si un tableau de tableaux vous convient 
(tableaux internes a deux elements), alors c'est tout a fait trivial : 

var logins = [ 'tdd' , 'al', 'nioute', 'doudou' ]; 

var passwords = [ 'blah', 'koolik', 'linux', 'lachef , 'toto' ]; 

var auth = logins. zip (passwords) ; 

// => [[ 'tdd', 'blah' ], [ 'al\ 'koolik'], 

// [ 'nioute', 'linux' ], [ 'doudou', 'lachef']] 

Notez que les elements sumumeraires des tableaux accoles sont ignores : l'iteration 
prend le tableau appelant comme base. 

Peut-etre cette structure en tableaux imbriques vous pose-t-elle probleme, et vous 
prefereriez des objets avec des proprietes nominees. Qu'a cela ne tienne ! Vous pouvez 
preciser comme dernier argument un iterateur charge de construire la valeur accolee 
sur la base du tableau interne initialement prevu. Voici notre appel precedent ajuste : 

var auth = logins .zip(passwords, function(args) { 
return { login: args[0], password: args[l] }; 

}); 

alert(auth[0] .login + ' / ' + auth [0] .password) ; 
// => 'tdd / blah' 

Notez qu'il est ainsi possible d'accoler autant de tableaux qu'on le souhaite. Si vous 
aviez par exemple un tableau supplemental de salts pour l'encryptage des mots de 
passe, vous pourriez tout a fait l'ajouter : 

var auth = logins .zip(passwords, salts, function(args) { 

return { login: args[0], password: args[l], salt: args[2] }; 

}); 
Conversions : toArray, entries, inspect 

Enfin, il existe quelques conversions simples sur les objets enumerables. 
SYNTAXE 

objetEnumerable.toArray/entriesO -> tableau 
objetEnumerable. inspectO -> chaine 

D'abord tout objet enumerable peut etre converti en tableau, par exemple avec $A, 
puisqu'on dispose d'une methode toArrayQ (et d'un alias, entries). Notez que sur 
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un Array, toArrayO renvoie done un clone du tableau d'origine, ce qui peut s'averer 
pratique de temps a autre. 

Par ailleurs, les objets enumerables fournissent bien sur une methode i nspect () , qui 
renvoie une representation texte orientee debogage. Pour information, il s'agit en 
realite de celle disponible dans Array, encadree de '<#Enumerable: ' etde '>'. Notez 
que lorsqu'un objet incorporant Enumerable redefinit sa methode inspectO (comme 
e'est le cas pour Array et Hash, notamment), la version redefinie a priorite. 

Tableaux associatifs avec Hash 

Un Hash est une sorte de tableau associatif entre des cles et des valeurs. En JavaS- 
cript, tout objet peut etre considere comme un Hash, puisqu'il ne s'agit finalement 
que d'une serie de proprietes definies comme des paires nom + valeur (bon, il y a 
aussi le prototype, e'est vrai). 

L'objet Hash de Prototype fournit quelques methodes concues pour traiter l'objet 
enrobe (car on construit souvent un Hash comme enrobage d'un objet existant) 
expressement comme une serie de paires cle + valeur. 

II faut aussi savoir qu'un Hash obtenu par $H incorpore Enumerable (et ce n'est pas 
rien !). Literateur recoit alors comme objet courant une paire nom + valeur sous un 
format confortable : on peut s'en servir comme un tableau a deux elements, ou uti- 
liser ses proprietes key et val ue. 

SYNTAXE 

hash. i nspect () -> chaine 
hash. keys () -> tableau 
hash .merge(autreHash) -> hash 
hash.toQueryStringO -> chaine 
hash. val ues() -> tableau 

Les methodes keys() et valuesO renvoient chacune un tableau. Bien entendu, la 
premiere renvoie les cles (si on a enrobe un objet, ce sont les noms des proprietes), 
tandis que la seconde renvoie les valeurs. La premiere est generalement beaucoup 
plus utilisee que la seconde. En effet, quand on a le nom d'une propriete de ob j dans 
une variable key, la maniere la plus directe d'acceder a la valeur est ob j [key] ! 

Autre point notable : keys () ignore deliberement les methodes de l'objet, contraire- 
ment a la traditionnelle boucle for (var key in obj), qui ne fait pas de detail entre 
les methodes et les champs. 
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Par exemple, si vous voulez connaitre tous les champs accessibles pour 1' objet 
navi gator du DOM niveau 0, il suffit de lancer ceci : 

alert($H (navigator) . keys() . sort() . join('\n ')) ; 

Inutile de s'appesantir sur la methode inspectO, au role desormais classique. En 
revanche, la methode merge est pratique : elle permet de combiner deux Hash pour 
produire un nouveau Hash resultat. Ce dernier contient toutes les cles des deux Hash 
d'origine. En cas de cle dupliquee, la valeur du Hash passe en argument aura ecrase 
celle du Hash d'origine. 

La derniere methode, toQueryStringO, s'avere fort utile lorsque nos scripts doivent 
composer des parametres de requete GET, ou un corps URL-encode de requete POST. 
En effet, cette methode construit une representation textuelle URL encodee des 
paires cle + valeur du Hash. En construisant sa serie de parametres dans un Hash ou 
un objet anonyme, on peut done aisement obtenir le texte final (ce qui est plus simple 
que de le confectionner soi-meme). Petit exemple rapide : 

var params = { title: ' Un Exemple', age: 28 }; 
var encoded = $H(params) . toQueryStringO ; 
// => title=Un%20Exemple&age=28 

Remarquez qu'il s'agit la de la fonction reciproque de String. parseQuery. Nous 
nous en servirons dans nos prochains chapitres sur Ajax. 

ObjectRange : intervalles d'objets 

II s'agit d'un petit objet simple, qui vise a encapsuler une definition de boucle, gene- 
ralement numerique. Toutefois, il peut fonctionner sur n'importe quel objet imple- 
mentant une operation succ() pour passer d'une valeur a la suivante. 

SYNTAXE 

I$R(debut, finf, finExclue = fa7sej) -> intervalle 
interval le.include(valeur) -> booleen 

La seule maniere propre de creer un ObjectRange est d'utiliser la fonction globale $R, 
presentee plus haut dans ce chapitre. 

En revanche, la methode include exige que les objets sous-jacents prennent en 
charge les operateurs relationnels < et <=. Ceci s'entend au sens dynamique de JavaS- 
cript, pas au sens statique de compilation des templates C++. Par exemple, si on 
n'appelle pas la methode include, le fait que les objets sous-jacents n'implementent 
pas un comportement coherent sur < et <= est sans importance. 
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ObjectRange incorpore bien entendu Enumerable, ce qui fait qu'il permet non seule- 
ment de realiser des iterations, mais aussi de beneficier de toutes les operations four- 
nies par le module. 

Des exemples d'utilisation ont ete presentes a plusieurs reprises dans ce chapitre. 

PeriodicalExecuter ne se lasse jamais 

S'il vous arrive de devoir executer une fonction a intervalles reguliers, vous pouvez uti- 
liser PeriodicalExecuter. Tres honnetement, cet objet n'a qu'une utilite : il evite de 
rentrer de nouveau dans la methode si son invocation precedente nest pas terminee. 

SYNTAXE 

I new PeriodicalExecuter(callback, interval InSeconds) 
pe.stopC) 

Pour stopper la repetition, il suffit d'appeler la methode stop. L'objet se passant 
comme premier argument de la fonction de rappel, celle-ci peut decider d'etre la der- 
niere invocation en appelant stop sur l'argument. 

Attention ! Si vous passez une methode, pensez conserver son lien (binding) correc- 
tement. 

Exemples d'utilisation : 
new PeriodicalExecuter(function() { window. title += '.'; }, 1); 

var notifier = $('notifier') ; 

new Periodical Executer (notifier .cleanup. bind (notifier) , 5) ; 

Vous devriez reevaluer vos modeles 

La version 1.5.0 a vu apparaitre un petit objet curieux : Template. Cet objet permet 
de gerer des syntaxes de substitution au sein d'un modele textuel. 

SYNTAXE 

I new Tempi ate (tempi ateTextf, patternj') -> modele 
model e.evaluate(scopeObject) -> chaine 

Par exemple, si vous examinez la methode String. gsub, exposee plus haut dans ce 
chapitre, vous voyez une syntaxe de type #{propriete}, avec gestion d'un backslash 
devant le # pour desamorcer l'interpretation. Ce travail est realise en interne par un 
objet Template. Je vais appeler de tels objets des modeles. 
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Un modele est defini par deux caracteristiques : 

1 Son motif textuel, qui constitue le patron sur lequel confectionner le texte resultat 
a chaque evaluation. 

2 Son motif de detection, qui est une expression rationnelle decrivant les portions 
dynamiques du motif textuel. Si vous souhaitez utiliser le motif par defaut, 
comme pour String. gsub par exemple, vous n'avez pas besoin de passer ce 
second argument a la construction : le motif par defaut Template. Pattern est 
alors utilise. 

Le principe est cependant toujours le meme : le motif de detection vise a isoler un 
nom de propriete (en l'occurrence un champ, pas une methode) qui sera recuperee 
dans l'objet de contexte fourni a revaluation. On peut en effet reutiliser un meme 
modele autant de fois qu'on veut, en appelant sa methode eval uate, a laquelle on 
fournit l'objet contenant les proprietes a substituer dans le corps du texte. 

Voyez l'exemple suivant : 

var person = { name: 'Elodie', age: 25, height: 165 }; 

var tpl = new Template('#{name} a #{age} ans et mesure #{height}cm. ') ; 

alert(tpl .evaluate(person)) ; 

// => 'Elodie a 25 ans et mesure 165cm.' 

N'est-ce pas sympathique en diable ? 

Utiliser un motif de detection personnalise 

Toutefois, supposons a present que vous deviez travailler sur les elements d'un 
tableau, et que cette syntaxe vous semble trop lourde. Vous pouvez fournir votre 
propre motif de detection. Seule condition (mais de taille pour les debutants en 
expressions rationnelles), celui-ci doit isoler trois groupes : 

1 Le caractere ou l'ancre situe juste avant la portion a substituer. 

2 La portion a substituer complete. 

3 La partie de la portion a substituer qui constitue le nom de la propriete a recupe- 
rer dans l'objet de contexte. 

Par exemple, le motif par defaut, Template. Pattern, a l'aspect suivant : 

/(A|.|\r|\n)(#\{(.*?)\})/ 

On distingue bien les trois groupes : 

1 ( A l ■ l\r|\n) peut correspondre au debut de texte, a un retour chariot ou saut de 
ligne, ou un autre caractere quelconque. 

2 (#\{ ( . *?) \}) correspond a tout le bloc a substituer, du # initial a l'accolade fermante. 



Prototype : simple, pratique, elegant, portable ! 

Chapitre 4 

3 (.*?) correspond au nom de la propriete, constitue d'un nombre quelconque de 
caracteres sauf l'accolade fermante (le *? est un quantificateur reticent, qui s'arrete 
le plus tot possible). 

Le premier groupe est necessaire pour permettre a eval uate d'ignorer les portions 
precedees d'un backslash. Le second groupe lui permet justement de laisser le texte 
original tel quel dans un tel cas. Le troisieme groupe lui donne le nom de la propriete 
a aller chercher. 

Imaginons done que nous souhaitons une syntaxe a base de dollars : $i ndex. On con- 
sidere que les indices sont constitues exclusivement de chiffres arabes. Notez qu'une 
telle syntaxe, sans caractere delimiteur de fin, empeche de coller de tels chiffres 
immediatement a la suite de nos substitutions (ce qui tend a demontrer l'utilite de 
tels encadrements). Void notre motif de detection, tres inspire de celui par defaut : 

/CA|.|\r|\n)C\$C\d+))/ 

Voyons le resultat : 

var data = [ 'Elodie', 25, 1.65 ]; 

var tpl = new Template('$0 a $1 ans et mesure $2m. ' , 

/(A|.|\r|\n)(\$(\d+))/); 

alert(tpl .evaluate (data)) ; 

// => 'Elodie a 25 ans et mesure 1.65 m.' 

Notez que si la propriete est introuvable, eval uate substitue la chaine vide ( ' ' ). 

Try.these cherche une methode valide 

Pour terminer avec les nouveaux objets a utilisation assez generique, voici l'objet Try, 
qui n'existe pour l'instant que comme espace de noms pour la methode these. 
Lavantage etant que « Try.these », e'est tres lisible. 

Cette merveilleuse petite methode recoit une serie de fonctions en arguments. Elle 
va les appeler l'une apres 1' autre jusqu'a en rencontrer une qui ne leve aucune excep- 
tion. Elle renvoie alors son resultat. 

On utilise Try.these lorsqu'on doit creer un code portable qui est oblige de tester 
plusieurs implementations connues d'un meme comportement. Ce type de situation 
devrait disparaitre peu a peu, au fur et a mesure que les navigateurs s'aligneront sur 
toujours plus de standards, mais on rencontre encore quelques cas difficiles. 

Dans Prototype, l'exemple roi est celui qui consiste a obtenir un objet 
XMLHttpRequest, cas de figure que nous allons etudier des le prochain chapitre. Sui- 
vant le navigateur, on ne precede pas de la meme maniere. Sur MSIE 5.x, on recu- 
pere un objet ActiveX nomme Microsoft.XMLHTTP. Sur MSIE 6, le nom a change : 
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Msxml 2. XMLHTTP. Sur tous les autres navigateurs (y compris MSIE 7, qui s'est enfin 
aligne sur le standard emergeant), on cree directement un objet natif JavaScript. 

En temps normal, gerer ce genre d'alternatives donne des imbrications verbeuses de 
blocs try/catch. Avec Try. these, tout s'eclaire. Voyez plutot le code de 
Ajax.getTransportO, dans Prototype : 

Listing 4-11 Ajax.getTransportO, I'exemple roi de Try. these 

return Try.these( 

functionO {return new XMLHttpRequestO} , 

functionO {return new ActiveX0bject('Msxml2 .XMLHTTP')} , 

functionO {return new ActiveXObject('Microsoft. XMLHTTP')} 

) II false; 

Remarquez qu'on passe trois fonctions en arguments. Try. these tentera les trois, 
dans cet ordre. La premiere qui n'echoue pas en levant une exception verra sa valeur 
de retour utilisee. Si aucune ne fonctionne, Try. these renvoie undefined, ce qui 
permet ci-dessus de basculer sur f al se. 



Manipulation d'elements 

Nous en avons termine avec les nouveaux objets « generiques » de Prototype. II s'agit 
principalement de structures de donnees et de petits objets utilitaires au niveau algorith- 
mique. Attaquons maintenant des objets dedies a la manipulation du contenu de la page. 

Nous verrons d'abord les manipulations valables pour tout element du document, 
avec Element. Apres un rapide detour par Selector (sans lequel la fonction globale 
$$ n'existerait pas), nous verrons les objets dedies aux formulaires, a la gestion unifiee 
des evenements, et enfin aux ajouts dynamiques de contenu. 

Element, votre nouveau meilleur ami 

L'objet Element est un espace de noms pour de nombreuses methodes destinees a 
manipuler des elements du DOM. En raison de leur nombre, je les ai classees par 
theme pour s'y retrouver plus facilement. 

Element.Methods et les elements etendus 

Techniquement, ces methodes sont en realite definies dans un module 
Element.Methods, lequel est ensuite incorpore a Element. La raison de cette separa- 
tion, qui peut d'abord sembler superflue, reside dans la notion d'element etendu, que 
nous avons deja abordee en debut de chapitre. 
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En isolant les methodes d'extension des quelques methodes « administratives » 
internes a Element, Prototype est capable de les injecter si necessaire dans les ele- 
ments du DOM qui vous sont retournes par des fonctions comme $ ou $$. 

Le resultat net : dans la vaste majorite des cas, les deux syntaxes suivantes sont stric- 
tement equivalentes : 

SYNTAXE 

I El ement . methode (votreEl ement , arg.) 
votreElement . methode (arg.) 

Quelques petits exemples pour frxer les idees : 

Element.hide('monld') ; 

$C'monId').hideO; 

monEl ement. hi de() ; 

Element. update(monEl ement , '<strong>Genial !</strong>') ; 

$('monId') . update ('<strong>Genial !</strong>') ; 

monElement.update('<strong>Genial !</strong>') ; 

Quand <:a ne veut pas... 

II reste une question en suspens : dans quels cas cet acces direct 
(monElement. methode) n'est-il pas disponible ? II faut que les conditions suivantes 
soient reunies : 

1 Votre navigateur ne propose pas d'objet prototype pour les elements issus du 
DOM. Vous pouvez tester cela en chargeant prototype, js dans une page et en 
examinant la variable globale privee _nativeExtensions : si elle est a false, vous 
etes dans ce cas. 

2 Vous travaillez sur un element que vous n'avez pas recupere au travers d'une 
methode documentee dans ce chapitre comme renvoyant un element garanti 
etendu (eltEtendu dans les blocs de syntaxe). 

A l'heure ou j'ecris ces lignes, Firefox, Camino, Mozilla, Safari et Konqueror propo- 
sent un objet prototype pour les elements du DOM. La condition n°l est done rem- 
plie uniquement sur MSIE ! 

Le principal cas de figure ou la condition n°2 est remplie est la traversee « a 
l'ancienne » du DOM. Vous recuperez par exemple un element avec $('sonId'), 
puis vous commencez a naviguer avec fi rstChild, nextSibling, parentNode, etc. 
Cette navigation ne passe bien sur pas par Prototype, et si la condition n°l est rem- 
plie, les elements retournes ne sont pas etendus. 

Autre cas courant remplissant la condition n°2 : la recuperation de l'element cible d'un 
evenement avec Event, el ement, ou d'un element derive avec Event. findEl ement. 
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Nous verrons ces methodes plus tard dans ce chapitre. Notez qu'il suffit d'enrober 
l'appel dans la fonction $ pour retrouver les extensions. 

Dans la pratique, ceci n'est pas un probleme. Vous connaissez votre code, et si vous 
utilisez une traversee du DOM, vous etes au courant. Dans un tel contexte, vous 
n'avez qua utiliser la version indirecte (Element.methode(elt)) des methodes, qui 
est d'ailleurs celle qu'on trouve sur la plupart des articles et didacticiels, pour la 
simple et bonne raison que la version directe n'est apparue qu'avec la version 1.5.0. 

Le reste du temps, vous pouvez normalement utiliser sans crainte la version directe, 
qui est en effet plus concise, plus elegante, et globalement plus naturelle. 

Neanmoins, par souci de garantie de fonctionnement, les sections qui suivent docu- 
menteront les syntaxes indirectes. A vous de garder a l'esprit qu'une version directe 
est le plus souvent disponible. 

Valeur de retour des methodes 

Toutes les methodes de Element (ainsi que de Form et Form. Element) qui modifient 
I'element vise renvoient cet element. Cela permet d'enchainer les modifications, par 
exemple : 

$(' si debar') .addClassName('selected') .show() ; 
Au total, cela concerne tout de meme 27 methodes... 

Element es-tu la ? hide, show, toggle et visible 

Quatre methodes gerent la visibilite de I'element. Elles utilisent toutes la propriete 
CSS display, qu' elles placent a 'none' pour masquer I'element, et qu' elles desacti- 
vent (en la ramenant a ' ' ) pour afficher I'element. Ceci suppose deux choses : 

1 Les elements concernes seront retires du flux du document lorsqu'ils sont mas- 
ques, engendrant un reflow s'ils faisaient partie du flux (un element positionne de 
facon absolue ou fixe n'en fait pas partie, par exemple). 

2 Si vous souhaitez masquer I'element d'entree de jeu, vous devez le faire avec un 
attribut style dans le document, et non avec la feuille CSS. C'est le seul cas de 
figure dans ce livre qui justifie une legere intrusion de 1' aspect dans le contenu. 

SYNTAXE 

Element. hide(elt) -> elt 
Element.show(elt) -> elt 
Element.toggle(elt) -> elt 
Element. visible (elt) -> booleen 
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Les noms me semblent parfaitement explicites. Les methodes hide et show mas- 
quent l'element en exigeant un display a 'none' ou en retirant cette surcharge, 
tandis que toggl e bascule de Fun a l'autre. Les trois acceptent autant d'elements que 
vous le souhaitez. 

La methode vi si bl e est en realite un predicat, qui indique si l'element est visible ou 
non. Elle le considere invisible si sa propriete display est a 'none'. II est dommage 
que Prototype ne prefixe pas ses methodes predicats par un 'is'... 

Gestion du contenu : cleanWhitespace, empty, remove, replace et update 

Prototype fournit plusieurs methodes visant a modifier ou remplacer le contenu d'un 
element, voire a remplacer l'element lui-meme, ou carrement le retirer du DOM. 

SYNTAXE 

Element. cleanWhitespace Celt) -> elt 
Element. empty (elt) -> booleen 
Element.remove(elt) -> elt 
Element. replace (elt, html) -> elt 
Element.update(elt, html) -> elt 

La methode cleanWhitespace supprime tout noeud fils textuel vide (constitue unique- 
ment de whitespace). C'est une sorte d'epuration du DOM qui permet de simplifier les 
algorithmes de traversee (firstChild, lastChild ou nextSibling sont generalement 
des elements comme on pourrait s'y attendre, plutot que des noeuds textuels vides dus a 
l'indentation d'un code source). 

La methode empty est un predicat indiquant si l'element est vide, c'est-a-dire ne con- 
tenant au plus que du whitespace. 

Comme son nom le laisse supposer, remove retire l'element du DOM. C'est juste une 
simplification du sinueux elt.parentNode. removeChild(elt). Mais en acces direct, 
avouez que elt . remove (), c'est plus sympatique ! 

Les deux methodes replace et update ne different que sur un point : update rem- 
place le contenu de l'element, tandis que replace remplace l'element lui-meme ! La 
difference est cependant de taille pour vos algorithmes. Dans la pratique, update est 
plus frequemment utilisee. 

Les deux interpretent le bloc HTML comme suit : les fragments de script sont 
retires avant insertion dans le DOM, puis ces memes scripts sont executes a part, 
juste apres l'insertion (a 10 ms d'ecart, vous ne risquez pas de sentir la difference). 
Lidee est que ces fragments de script ne sont pas censes persister dans le DOM, mais 
qu'il peut etre interessant d'injecter tant du contenu que du comportement dans un 
document (notamment pour les reponses Ajax). 
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Styles et classes : addClassName, classNames, getElementsByClassName, 
get ElementsBy Selector, getStyle, hasClassName, match, removeClassName 
et setStyle 

Nous disposons de nombreuses methodes, et meme d'un objet dedie, pour gerer les 
classes CSS et les proprietes CSS individuelles. 

SYNTAXE 

Element. addClassNameCelt, className) -> elt 
Element. classNames Celt) -> Element. ClassNames -> elt 
Element.getElementsByClassNameCelt , className) -> [eltEtendu...] 
Element. getElementsBySelector(elt, regie...) -> [eltEtendu...] 
Element.getStyle(elt , style) -> valeur 
Element. hasClassName(elt, className) -> booleen 
Element. match(elt, singleSelector) -> booleen 
Element. removeClassName (elt, className) -> elt 
Element.setStyle(elt, { propl: vallf,..J }) -> elt 

Comme vous le savez, un meme element peut avoir plusieurs classes CSS associees, 
en separant leurs noms par des espaces. Afin de vous eviter d'avoir a gerer les mani- 
pulations de texte, vous disposez done des methodes addClassName, 
removeClassName et hasClassName. On peut egalement examiner l'ensemble des 
classes d'un element en appelant la methode classNames, qui renvoie un objet dedie 
El ement . CI assNames (voir plus bas). 

Vous pouvez par ailleurs manipuler confortablement les proprietes CSS individuelles 
de votre element au travers des methodes getStyle et setStyle. Derriere leur appa- 
rente simplicite, elles realisent un travail complexe. 

Ainsi, getStyl e ne cherche pas qua vous renvoyer la valeur specifiee de la propriete. 
Si une telle valeur existe, elle vous la renvoie bien entendu. Dans le cas contraire, elle 
se debrouille avec les possibilites du navigateur (DOM niveau 2 Style ou API pro- 
prietaire) pour extraire la valeur calculee de la propriete, qui peut par exemple resulter 
d'un style par defaut ou de l'heritage. Si la propriete a la valeur speciale 'auto', 
getStyl e renvoie null. Sinon, elle renvoie la valeur. Enfin, notez que le nom de pro- 
priete passe a getStyle peut etre celui de la recommandation CSS ou celui de la pro- 
priete DOM correspondante. Voir 1' exemple de String. camel ize, plus haut dans ce 
chapitre, pour un rappel. 

Si ces notions de valeur specifiee, valeur calculee, cascade ou heritage sont floues 
pour vous, n'hesitez pas a lire tranquillement le debut de l'annexe B, qui les decrit 
avec precision. 

La methode setStyle utilise une syntaxe plus evoluee pour son deuxieme argument, 
afin de permettre la definition d'un nombre quelconque de proprietes en un seul 
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appel. On lui passe un objet anonyme dont les proprietes ont le nom (CSS ou 
DOM) de la propriete CSS voulue, avec leurs valeurs. Exemples : 

Element. setStyleC indicator' , { opacity: '0.6' }) ; 
$('notif) .setStyle({ background: '#fdd', color: 'maroon'}); 

La methode match accepte un selecteur unique (done sans espaces) et renvoie true si 
l'element satisfait ce selecteur. 

Enfin, la methode getElementsByCl assName est un equivalent local de la methode 
homonyme dans document, et getElementsBySelector est un equivalent local de la 
fonction $$. 

L'objet Element.ClassNam.es 

L'objet Element. CI assNames est utilise pour gerer les classes CSS d'un element. 
Employe en interne par des methodes comme addClassName ou hasClassName, il est 
egalement retourne pour utilisation directe par la methode classNames. Notez qu'il 
incorpore Enumerable. 

SYNTAXE 

ecn. set(className) 
ecn . addCcl assName) 
ecn . remove(cl assName) 
ecn.toStringC) -> chaine 

Les noms des methodes parlent d'eux-memes. add et remove ajoutent ou retirent a la 
liste courante de classes, tandis que toStri ng() renvoie la representation de I'attribut 
class correspondant : les noms des classes separes par des espaces. Si vous trouvez 
que des methodes manquent, souvenez-vous qu'on dispose de toutes les methodes de 
Enumerable, par exemple include ! 

Enfin, set remplace toute la liste par une nouvelle definition, dont la syntaxe est 
celle de i'attribut HTML class (et de I'attribut DOM cl assName) : les noms separes 
par des espaces. 

Les copains d'abord : 

ancestors, descendants, nextSiblings, previousSiblings, siblings 

Disponibles depuis la 1.5.0 RC1, ces methodes permettent de recuperer les nceuds 
autour de l'element. 
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SYNTAXE 

Element, ancestors Celt) -> [eltEtendu...] 
Element. descendants (elt) -> [elt...] 
Element.nextSiblingsCelt) -> [eltEtendu...] 
Element. previousSiblingsCelt) -> [eltEtendu...] 
Element. siblingsCelt) -> [eltEtendu...] 

La lignee (elements ancetres) est renvoyee par ancestors depuis le noeud pere jusqu'au 
plus lointain ancetre. Le tableau renvoye par descendants suit l'ordre du document. 
Les methodes nextSiblings et siblings suivent l'ordre du document, tandis que 
previousSiblings suit l'ordre inverse (en s'eloignant de l'element d'origine). 

Petite incoherence, descendants reste pour le moment la seule a ne pas renvoyer des 
elements garantis etendus. Si cela vous embete pour la genericite de vos traitements, 
sachez qu'il suffit de transformer son retour comme ceci : 

var descs = $('eltld') . descendants () .map (Element. extend) ; 

Bougez ! down, next, previous et up 

La RC1 a introduit quatre nouvelles methodes destinees a se deplacer tres rapide- 
ment dans les elements du DOM. 

SYNTAXE 

Element. down Celtf, expression] [, index]') -> [eltEtendu...] 
Element. next Cel t[, expression] [, index]) -> [eltEtendu...] 
Element. previousCeltf, expression] [, index]) -> [eltEtendu...] 
Element.upCeltf, expression] [, index]) -> [eltEtendu...] 

Le sens de deplacement est evident ; par exemple, down utilise les elements fils, 
tandis que previous passe par previousSibling. Les elements renvoyes le sont dans 
l'ordre prevu par les methodes correspondantes dans la section precedente. 

Largument optionnel expression fournit un selecteur CSS unique (sans espaces), 
tandis que i ndex permet d'indiquer la position de la correspondance sur laquelle on 
souhaite arriver (demarre a zero). On peut utiliser Fun, 1' autre, ou les deux. 

Void un exemple tire du journal des modifications de Prototype, pour vous aider a 
comprendre. Supposons l'arborescence suivante : 

<div id="sidebar"> 
<ul id="nav"> 
<li>...</li> 
<li>...</li> 
<li class="selected">...</li> 
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</ul> 

<ul id="menu"> 



Void maintenant quelques utilisations et leurs resultats commentes. 



Code 

$('nav').up() 
$('menu') .up('div') 



Tableau 4-1 Invocations de up, down, previous et next 

Element resultat Commentaires 

<div id="sidebar"> Montee d'un cran sans contrainte 

aucune, ou jusqu'au premier ancetre 



$(' si debar') .down() 
$('sidebar').down('uT) 
$('menu') . previous () 

$('sidebar').down(l) 
$('sidebar').down('li') 



$('sidebar').down(2) 

$('sidebar').down('li ' , 2) 

$(' sidebar ').down('li ').next('li ') 



$(' si debar' ).down('li .selected') 



div. 



<ul id="nav"> 



Premier <li >...</! i> 



Descente d'un cran depuis sidebar, 
descente jusqu'a un ul, ou element 
precedent menu... 

Descente de deux crans (position 1, on 
demarrea zero) depuis sidebar, ou 
descente jusqu'a un 1 i . 



Deuxieme <1 i >...</l i > Descente de trois crans depuis 

si debar, voire avec contrainte 1 i en 
plus, ou prochain 1 i apres le premier 1 i 
descendant de sidebar. 



$(' si debar') .down('ul ') .next() 



<li class="selected"> 



</li> 



Descente jusqu'au premier 1 i ayant une 
classe CSS selected. 



<ul id="menu"> 



Element suivant le premier ul descen- 
dant de sidebar. 



Remarquez notamment que next et previous eliminent le probleme des noeuds texte 
vides issus de l'indentation, que nous avons detaille au chapitre 3. 



Positionnement : getDimensions, getHeight, makePositioned, 
undoPositioned 

Quelques methodes controlent le positionnement. II ne s'agit pas tant d'une API 
totale (par exemple, on n'a pas de getWidth, qui serait pourtant triviale a ecrire) que 
de methodes couvrant certains besoins de Prototype. La plupart du temps, vous utili- 
serez plutot l'objet Position. 

SYNTAXE 

Element. getHeight (elt) -> Number 

Element. getDimensions(elt) -> { width: Number, height: Number } 

Element. makePositioned(elt) -> elt 

Element. undoPositioned(elt) -> elt 



Dormer vie aux pages 

Premiere partie 

La methode getHeight renvoie la hauteur en pixels de I'element. La methode 
getDimensionsO est plus complete, en renvoyant un objet dote de deux proprietes : 
width et height, deux nombres exprimes en pixels. 

makePositioned examine la propriete CSS position de I'element : si elle est inde- 
finie, ou explicitement specifiee a static (sa valeur par defaut), elle la passe en 
relative apres avoir sauvegarde son ancienne valeur pour restauration. 

Cette restauration est justement 1' affaire de undoPositioned, qui remet la propriete 
CSS position a son ancienne valeur. Cette methode n'a done de sens que suite a un 
makePositioned. 

Ces quatre methodes sont abondamment utilisees en interne par des objets comme 
Posi ti on, et sont egalement tees utiles a la bibliotheque script.aculo.us, en particulier 
pour ses effets visuels et la gestion du glisser-deplacer. 

Defilement et troncature : makeClipping, scrollTo, undoClipping 

Voici trois methodes gerant le defilement et la troncature de contenu. 

SYNTAXE 

Element. scrollTo(elt) -> elt 
Element. makeClipping Celt) -> elt 
Element. undoClipping (elt) -> elt 

La methode scrollTo fait si besoin defiler la vue du navigateur de facon a ce que 
I'element y soit visible. C'est tees pratique suite a l'insertion dynamique d'un element 
par exemple, pour s'assurer que l'internaute voit bien la modification. Et cela nous 
evite de devoir recourir a des bricolages navrants d'ancre dans FURL de la page. 

Les methodes makeClipping et undoClipping ont la meme relation que 
makePositioned et undoPositioned. II s'agit ici de determiner si, lorsqu'une boite 
dimensionnee a trop de contenu, celui-ci doit etirer son conteneur ou etre partielle- 
ment masque, la boite conservant sa taille. 

Techniquement, makeClipping sauvegarde la valeur actuelle de la propriete CSS 
overflow, et la passe a hidden. undoClipping la restaure. 

Dans tous les cas, sachez que la version actuelle de Konqueror (a l'heure ou j'ecris ces 
lignes, la version 3.5.2) ne prend pas totalement en charge la propriete CSS overfl ow, 
utilisee par ces methodes de troncature. Les resultats sont done surprenants, comme 
vous pourrez le voir sur les exemples de 1' archive des codes source du livre. 
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childOf le mal nomme 

Pour en finir avec Element, il reste une derniere methode, childOf, qui est toutefois 
legerement mal nominee (un peu comme tous les arguments frequency de Proto- 
type, qui sont en realite des periodes, et devraient done se nommer au minimum 
interval...). 

En effet, en termes DOM, un element fils est situe directement sous son element 
pere. Un element situe a n'importe quel niveau de profondeur est ce qu'on appelle un 
element descendant. 

SYNTAXE 
Element .childOf Celt, ancestor) -> booleen 

Or, e'est precisement ce que fait chi 1 dOf : elle teste si 1' element est un descendant de 
l'element indique en deuxieme argument. Elle aurait sans doute du s'appeler 
descendantOf ... Mais je vous l'accorde, je chipote un peu. 

Selector, l'objet classieux 

Void l'objet utilise, en interne, par la fonction globale $$. II permet de representor 
une serie contigue de selecteurs CSS : 

• Element (nom de la balise) 

• ID(#id) 

• Attribut 

— [attr] 

— [attr="value"] 

— [attr !="value"] 

— [attr~="value"] 

— [attr |="value"] 

• Classe (.laClasse) 

En revanche, le selecteur de descendants, l'espace ( ' ' ), est traite directement par la 
fonction $$. Un Selector ne peut done pas le gerer. Les selecteurs de fils (>) et 
d'adjacence (+) ne sont pas encore pris en charge non plus. 

Le seul interet de manipuler Selector consiste a vouloir « cacher » une analyse de 
regie CSS (sans espaces) pour utilisation massive. 
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SYNTAXE 



new Selector (expr) 

sel . findElements(fscope = document]') -> [eltEtendu...] 

sel .toStringO -> chaine 

Pour creer manuellement un tel Selector, on utilise tout simplement new 
Selector(expression). L'expression est analysee et l'objet initialise, pret a l'emploi. 

Par la suite, on peut realiser 1' extraction correspondante en appelant sa methode 
findElements. Celle-ci prend un argument optionnel scope, qui precise la portion du 
document dans laquelle chercher. C'est justement grace a cet argument que $ $ imple- 
mente le selecteur de descendants. Si vous ne le precisez pas (ce qui devrait etre le cas 
general), on utilise toutle document. On recupere un tableau d'elements etendus. 

Enfin, la methode toStringO renvoie une representation textuelle de l'expression 
CSS correspondant au selecteur. Dans une utilisation manuelle, l'interet est mineur : 
c'est vous qui avez fourni l'expression... 



Manipulation de formulaires 

Prototype fournit de nombreux objets dedies a la manipulation des formulaires et de 
leurs champs. On trouve d'abord Field et Form, qui travaillent respectivement aux 
niveaux du champ et du formulaire entier. 

Certaines classes, dites observateurs, reagissent aux evenements de modification. 
Form. Observer reagit a toute modification dans un champ quelconque du 
formulaire ; il se repose en fait sur une serie d'objets Form. Element .Observer. 

Field / Form. Element 

L'objet Form. Element (et son alias Field) fournit des methodes de manipulation d'un 
ou plusieurs champs de formulaires. On fournit comme d'habitude soit FID soit une 
reference directe a 1' element. 

J'insiste : l'ID, pas le nom de champ (attribut id, pas name) ! 
SYNTAXE 

Field. activate(elt) -> elt 
Field. clear(elt) -> elt 
Field. disable(elt) -> elt 
Field. enable (elt) -> elt 
Field. focus (elt) -> elt 
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Field. getValue(elt) -> value | [value...] 

Field. present (el t) -> booleen 

Field. select (elt) -> elt 

Field. serial ize(elt) -> chaineURLEncodee 

Les noms parlent d'eux-memes, a quelques precisions pres. 

Je rappelle d'abord que les methodes figurant ici sont automatiquement ajoutees aux 
elements etendus lorsque c'est approprie. 

Commencons par les methodes sans surprises : clear efface le champ passe, focus 
donne... le focus (fait du champ la cible des saisies clavier), et select selectionne le 
texte a l'interieur du champ (utile uniquement pour les saisies de texte : type text, 
type password etbalise textarea). 

La methode present renvoie true uniquement si le champ passe a une valeur non 
vide (au sens strict : si elle ne contient que du whitespace, elle sera tout de meme con- 
sidered remplie). 

La methode activate est une sorte de combo : elle appelle d'abord focus, et si le type 
de champ s'y prete, elle appelle ensuite sel ect. Globalement preferable a focus. 

La methode serial ize fournit une representation URL encodee du champ, avec son 
nom et sa valeur. Si le champ est a valeur multiple (cas d'un select en mode 
multiple), il est present autant de fois que necessaire. 

La methode getValue renvoie la valeur du champ. Pour un champ a valeur simple, 
celle-ci est directement renvoyee. En valeur multiple, on obtient un tableau des 
valeurs selectionnees. 

Vous vous souvenez de la fonction globale $F ? C'est en realite un alias de 
Form. Element .getValue ! 

Ces deux methodes se reposent en fait lourdement sur l'objet technique interne 
Form. Element .Serial ize rs. 

L'objet Form. Element est aussi utilise en interne par l'objet Form, qui utilise une sorte 
de composition/delegation pour de nombreux traitements. 

Un mot sur Form.Element.Serializers 

Cet objet technique contient des methodes de routage vers le bon traitement 
d'extraction de valeur. Ses methodes renvoient en realite un tableau a deux elements : 
le nom du champ et sa valeur. 

Je ne rentrerai pas dans les details, mais voici l'essentiel de son comportement : 
• Pour un champ input de type submit, hidden, password, search ou text, ainsi 
que pour un champ textarea, la valeur est utilisee telle quelle, dans tous les cas. 
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• Pour un champ input de type checkbox ou radio, on ne renvoie quelque chose 
que si le champ est coche. 

• Pour un champ select simple (pas d'attribut multiple="multiple"), on recupere 
l'option selectionnee. S'il n'y en a pas, la valeur est la chaine vide (' '). Si l'option 
selectionnee n'a pas d'attribut val ue, son texte est utilise a la place, conformement 
a la recommandation W3C. 

• Pour un champ sel ect multiple, la valeur est un tableau des valeurs selectionnees, 
chacune etant determinee comme ci-dessus (attribut val ue si present, texte sinon). 



Form 



L'objet Form permet de manipuler un formulaire dans sa globalite. L' argument form 
est bien sur soit l'ID soit la reference directe de l'element form. 

SYNTAXE 

Form . di sabl e (f orm) 

Form . enabl e(form) 

Form.findFirstElement(form) -> elt 

Form . focusFi rstEl ement(form) 

Form.getElements(form) -> [elt...] 

Form.getInputs(formf, typeName][, name]') -> [elt...] 

Form . reset(form) 

Form.serialize(form) -> chaineURLEncodee 

Je rappelle d'abord que les methodes figurant ici sont automatiquement ajoutees aux 
elements form etendus. 

Commencons par les methodes simples : di sabl e et enabl e desactivent et reactivent 
l'ensemble des champs du formulaire. Un champ qui avait le focus le perdra juste 
avant de se desactiver. La liste des champs est obtenue par getElements. Pratique si 
l'envoi manuel du formulaire donne un traitement Ajax pendant lequel un second 
envoi serait problematique. 

La methode reset () se contente de reinitialiser le formulaire, comme le bouton 
obtenu par <input type=" reset" />. Je rappelle qu'il s'agit simplement de ramener 
les champs a la valeur qui leur est donnee dans le HTML. 

La methode getElements renvoie un tableau de tous les elements constituant des 
champs du formulaire, classes par balise : d'abord les input, puis les textarea et 
enfin les select. Cet ordre peut amener a des comportements inattendus de 
findFi rstElement ou focusFi rstElement. 

En effet, findFi rstElement devrait renvoyer le tout premier element non cache 
(c'est-a-dire qui ne soit pas un input de type hidden) et actif (non desactive, si vous 
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preferez) du formulaire. Cela signifie intuitivement « le premier dans l'ordre du 
document ». Or, si votre premier element est un select par exemple, et qu'il est suivi 
par des input, c'est le premier input qui sera selectionne (en supposant que tous 
soient actifs etvisibles). 

La methode focusFirstElement est une combinaison de confort : elle appelle 
activate sur le resultat de fi ndFi rstElement, tout simplement. 

Personnellement, je ne suis pas un grand fan de findFi rstElement. Un formulaire 
n'a pas forcement comme premier champ active le premier champ visible (si celui-ci 
apparait logiquement en premier, mais dispose d'une valeur par defaut le plus sou- 
vent satisfaisante, par exemple). L'ordre de tabulation n'est pas forcement celui du 
document. Et bien sur, le premier champ active peut parfaitement devoir etre un 
select ou un textarea (ce deuxieme cas est un peu plus rare). 

Je prefere passer par $$ pour obtenir mon premier champ actif et l'activer manuelle- 
ment, generalement comme ceci (supposons que mon formulaire ait pour ID 
'main Form 1 ) : 

I $$('#mainForm * [tabindex=l] ') [0] .activate () 

Apres, les gouts et les couleurs... 

La methode getlnputs est plus specifique que getElements. Elle ne s'occupe que des 
elements input, et permet de filtrer le resultat sur la base du type ou du nom (ou les 
deux). Imaginons que vous ayez des boutons radio : ceux representant les variantes d'une 
meme donnee auront le meme nom de champ. Vous pouvez les obtenir comme ceci : 

Form.getInputs('mainForm' , null, ' newsletterMode') 

Ou meme plus specifique, pour plus de securite : 
Form.getInputs('mainForm' , 'radio', 'newsletterMode') 

A moins que seules les cases a cocher, quelles qu'elles soient, vous interessent : 
Form.getInputs('mainForm' , 'checkbox') 

Enfin, la methode serialize renvoie la representation URL encodee du formulaire, 
comme on peut avoir besoin de la transmettre comme parametres GET ou corps POST 
dans une requete Ajax. Elle se repose sur la methode homonyme de Form. Element, 
quelle appelle pour chaque element en assemblant les resultats. 
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Form. Observer 

Void notre premier exemple d'observateur. Dans Prototype, un observateur est un meca- 
nisme surveillant a intervalle regulier la valeur d'un element. Lorsque celle-ci change 
(ainsi qua la premiere observation, qui n'a pas encore de valeur precedents a comparer), 
l'observateur appelle une fonction de rappel qu'on lui a fourni a la construction. 

SYNTAXE 
new Form. Observer (form, interval InSecs, callback) 

Techniquement, les observateurs sont definis par l'objet AbstractObserver, qui est 
etendu par divers objets, dont Form. Observer. Ces objets ont juste besoin d'imple- 
menter une methode getValueO, qui renvoie la valeur ainsi observee. 

Un observateur a toujours trois arguments dans son constructeur : 

1 L' element observe (ici un formulaire). 

2 L'intervalle (ou la periode, pour les mordus) en secondes. 

3 La fonction de rappel. Celle-ci recevra deux arguments : l'element observe, et sa 
nouvelle valeur. 

Afin de prendre en compte l'ensemble de ses champs, un Form. Observer definit le 
resultat de Form, serial ize comme etant sa valeur. 

Void un exemple d'utilisation (qui semble bien penible pour l'internaute) : 

function formChanged(form, newValue) { 

alert($H (newValue. par seQueryO) . toArrayO . join('\n')) ; 
} 
new Form. Observer ( ' mai nForm ' , 1, formChanged) ; 

On peut imaginer utiliser ce genre de chose pour soumettre les modifications a la 
volee en Ajax, par exemple. Si c'est pour de la completion automatique de texte, je 
vous conseille toutefois plutot d'utiliser l'objet Ajax.Autocompleter de 
script.aculo.us. Une merveille, et deja tout pret ! 

Form . Element .Observer 

Cet objet permet de reagir a intervalle regulier au changement d'un seul champ 
plutot que de n'importe quel champ du formulaire. 

SYNTAXE 
new Form. Element. Observer (el t, interval InSecs, callback) 
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La valeur est bien entendu obtenue par Form. Element. getvalue... Cet observateur 
s'utilise comme les autres (voir l'exemple donne pour Form. Observer). 



Gestion unifiee des evenements 

Je l'ai signale a de multiples reprises au chapitre precedent, Prototype brille particu- 
lierement par sa capacite a unifier la gestion des evenements. On l'a vu, tous les navi- 
gateurs repandus ne se conforment pas toujours exactement au DOM niveau 2 eve- 
nements, et MSIE est particulierement dans l'erreur, en adoptant une approche 
entierement distincte du standard. Cette situation constitue souvent un casse-tete 
pour les developpeurs web souhaitant mettre en oeuvre des traitements evenementiels 
un tant soit peu etoffes. 

Au travers de son objet Event, Prototype nous fournit tout le necessaire pour associer 
ou revoquer des gestionnaires d'evenements, et analyser les details d'un evenement 
lorsqu'il survient. 



Event 



L'objet Event sert d'espace de noms pour les methodes liees a la gestion evenemen- 
tielle. Considerez que l'objet passe a vos gestionnaires d'evenements pour representer 
l'evenement est proprietaire au navigateur. Les methodes de Event sont la pour s'y 
retrouver entre les implementations ; elles offrent une sorte d'API unifiee au-dessus 
des objets proprietaires. 

SYNTAXE 

E ven t . KEY_ (BACKSPACE / DELETE / DOWN/ END / ESC/ HOME / LEFT/ PAGEUP I PAGEDOWN I 

«• RETURN I RIGHT I TAB I UP) 
Event. el ement(evt) -> Element 
Event. findElement(evt, tagName) -> Element 
Event. isLeftClick(evt) -> booleen 

Event. observe(elt, evtName, observer/^, useCapture = false]') 
Event. pointerX(evt) -> Number 
Event. pointerY(evt) -> Number 
Event . stop(evt) 
Event. stopObserving(elt , evtName, observer/^, useCapture = false]) 

Le premier argument de chaque methode est l'objet qui est passe, lui aussi, en pre- 
mier argument a vos gestionnaires d'evenements. Cet objet vient du navigateur, et sa 
nature exacte varie. Prototype se debrouille. 
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Pister un evenement 

Pour associer un gestionnaire a un evenement sur un element precis, on utilise 
Event. observe. On precise l'element, le nom DOM de 1' evenement (pas de prefixe 
' on ' ), le gestionnaire a utiliser, et eventuellement l'utilisation du mode capture (voir 
le chapitre 3 pour plus d'informations sur la capture). 



Attention ! Le binding de vos gestionnaires 

Si votre gestionnaire est une methode qui a besoin d'acceder aux champs d'instance de son objet, 
n'oubliez pas d'utiliser bindAsEventListener. Souvenez-vous que bind oublierait quant a ellede 
vous transmettre I'objet evenement en premier argument. 



Void un premier exemple avec une fonction classique, qui cache un element des 
qu'on clique dessus : 

Listing 4-12 Inscription d'une fonction comme gestionnaire d'evenement 

function hi deEl ement (event) { 

Element. hide(Event.element(event)) ; 

} 

Event. observeCgrandTimide' , 'click', hideElement) ; 

Nous verrons la methode Event . el ement dans quelques instants. 

Void a present une autre version, qui garde un compteur de clics pour chaque element 
clique (ce qui permet d'utiliser le meme gestionnaire pour de nombreux elements, on 
suppose toutefois qu'ils ont tous des ID), et le fait disparaitre au bout de 3 clics. 

Comme le gestionnaire est une methode qui a besoin de pouvoir acceder aux champs 
de son objet, on utilise bindAsEventListener : 

Listing 4-13 Inscription d'une methode comme gestionnaire d'evenement 

var DelayedHider = { 
_countKeeper: $H(), 
handled ick: function (event) { 

var elt = Event. el ement (event) ; 

var count = this._countKeeper[elt. id] || 0; 

this ._countKeeper [elt.id] = ++count; 

if (3 == count) 

Element. hide(elt) ; 
} 

}; 

Event.observeC petitTimide' , 'click' , 

Del ayedHi der . handl eCl i ck . bi ndAsEvent Li stener (Del ayedHi der )) ; 
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C'est l'occasion de retrouver notre bon vieux | | pour gerer les valeurs par defaut, ou 
comme ici le cas initial, lorsque le compteur n'existe pas dans le Hash. 

On peut bien sur vouloir revoquer un gestionnaire, c'est-a-dire cesser de reagir a un 
evenement particulier, pour un element particulier. La revocation utilise tres exacte- 
ment les memes arguments que l'inscription, mais la methode s'appelle, tres logique- 
ment, stopObserving. 



BOGUE A la poursuite des f uites de memoire 

On a constate que sur MSIE 6, les gestionnaires inscrits causaient des fuites de memoire au decharge- 
ment de la page (navigation vers une autre URL, etc.) : tout n'etait pas correctement libere. 
Prototype 1 .5.0 corrige ce souci en tenant a jour une sorte de registre de tous les gestionnaires inscrits 
par observe et non encore revoques par stopObserving. Au dechargement de la page, tous les 
gestionnaires encore inscrits sont explicitement revoques. Hop ! Envolees, les fuites de memoire ! 



Demasquer ('element qui a re^u 1'evenement 

Lorsqu'un evenement survient, votre gestionnaire se reveille. Mais l'element qui a 
recu 1'evenement n'est pas forcement celui sur lequel votre gestionnaire est inscrit. 

En vertu du principe de bouillonnement, il peut s'agir d'un element descendant : 
ainsi, un gestionnaire click pour un paragraphe peut se declencher si on clique sur 
un texte dans un element strong a l'interieur de ce paragraphe... 

Par ailleurs, vous pouvez parfaitement avoir utilise un meme gestionnaire pour de 
multiples elements, comme on vient de le voir au listing 4-13. Alors comment 
distinguer ? Peste ! Mais comme au listing 4-13, justement : avec Event, element. 

Cette methode prend l'objet evenement recu et se debrouille pour extraire une refe- 
rence a l'element cible. Attention, l'element n'est pas etendu. C'est d'ailleurs pour- 
quoi, tout a l'heure, j'utilisais Element, hide (el t) au lieu de elt.hide(). Vous sou- 
venez-vous que je l'avais deja signale en creusant la notion d'element etendu, plus 
haut dans ce chapitre ? 

II existe egalement une methode Event. findElement. Elle permet de recuperer le 
plus proche element ancetre de l'element « cible » pour une balise donnee. Par 
exemple, vous souhaitez recuperer le plus proche div conteneur de votre element 
cible. Peut-etre ce dernier est-il un span cale dans le coin superieur droit de ce div, 
jouant le role d'une case de fermeture... Plutot que de naviguer a la main dans le 
DOM, utilisez : 

var containerDiv = Event. findElement (event , 'div'); 
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Je recommande une casse minuscule, comme toujours (optique XHTML), mais dans 
la pratique findElement, dans sa grande mansuetude, s'en moque. Si aucun element 
ancetre avec ce nom de balise n'est trouve, il renvoie null. 

Etouffer la propagation de 1'evenement 

La plupart du temps, vos gestionnaires sont les seuls censes devoir traiter un evene- 
ment particulier (par exemple un clic specifique, ou l'envoi d'un formulaire). Dans de 
tels cas, vous pouvez vouloir stopper la propagation de 1'evenement. 

Peut-etre votre gestionnaire implemente-t-il un controle validant le comportement 
par defaut de 1'evenement (on pense principalement aux envois de formulaire). Si 
votre algorithme le decide, il faut pouvoir annuler ce comportement par defaut. 

Ces deux operations sont indissociables avec Prototype : il considere que si vous 
annulez le comportement par defaut d'un evenement, le propager risquerait d'induire 
d'autres gestionnaires en erreur, tandis que si vous annulez la propagation, c'est pro- 
bablement que le comportement par defaut ne vous interesse pas. 

Et dans la pratique, il a raison. Si des contre-exemples vous viennent a l'esprit, com- 
mencez par reviser votre DOM niveau 2 evenements pour verifier que les evene- 
ments auxquels vous pensez se propagent effectivement, ou que leur comportement 
par defaut est bien celui que vous croyez. 

La methode utilisee est Event . stop. On lui passe l'objet evenement, et elle interrompt 
sa propagation tout en annulant son comportement par defaut. C'est tres pratique. 

Determiner I'arme du crime : souris ou clavier 

Savoir que 1'evenement s'est produit, et sur quel element il a originalement eu lieu, 
ne suffit pas toujours. Loin de la ! Lorsque tous les navigateurs implementent de 
facon uniforme une information, Prototype ne rajoute rien. En revanche, lorsqu'on a 
des disparites, il fournit une API unifiee. 

L'etat de la souris 

Les boutons de la souris sont representes de facon assez diversifiee d'un navigateur a 
l'autre, sans parler de la plate-forme. Prototype se borne a vous dire si le clic est con- 
sidere clic gauche classique, avec Event. isLeftClick (n'oubliez pas que sur le Mac, 
par exemple, on n'a pas de clic droit ; on utilise generalement Ctrl+Clic). 

La position du curseur est un concept a geometrie variable. La grande question est en 
effet : dans quel referentiel ? La page ? La portion visible de la page ? Lecran ? 
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Le DOM niveau 2 evenements prevoit deux couples de proprieties pour l'objet eve- 
nement que vous recevez : 

• screenX et screenY : position a l'ecran ; 

• cl i entX et cl i entY : position dans la partie visible de la page ; 

Prototype prevoit par ailleurs les besoins de positionnement et de glisser-deplacer en 
definissant la notion de position dans la page, au travers des deux methodes 
Event. pointerX et Event .pointerY. 

Les touches du clavier 

On trouve une serie de constantes KEY_xxx qui representent les principales touches 
speciales du clavier. De nouvelles constantes sont ajoutees au fil des versions de Pro- 
totype, selon les besoins apparus entre temps, et apres verification de l'unicite de la 
valeur sur toutes les plates-formes. 

Les touches correspondant a des caracteres ASCII n'ont pas besoin de constantes, 
car leur valeur correspond au caractere recherche. Si vous preferez, une constante 
KEY_8 serait egale au code du caractere ' 8 ' . Je rappelle que Backspace correspond a la 
touche francaise Ret. Arr., Delete a notre Suppr, Home a notre Orig et End a notre Fin. 

Sur quoi utiliser ces constantes et valeurs, me direz-vous ? Eh bien, il se trouve que 
les principaux navigateurs implementent de facon homogene l'information, pour une 
fois. Utilisez la propriete keyCode de l'objet evenement que votre gestionnaire recoit, 
comme ceci : 

function handleKeyPress(event) { 

if (KEY_RETURN == event . keyCode) 

// code de traitement 
} 

Les evenements clavier et souris sont par ailleurs normalement dotes de proprietes 
booleennes indiquant l'etat d'enfoncement des principaux modificateurs : Alt, Ctrl et 
Maj. Ce sont les proprietes altKey, ctrlKey et shiftKey, respectivement. Vous 
pouvez done facilement reagir a un Ctrl+G : 

function hand! eKeyDown (event) { 

if C'C . charCodeAt(O) == event . keyCode && event. Ctrl Key) 
// Code de traitement 
} 

Le charCodeAt(O) est necessaire car 'C ' est une Stri ng, par un char (qui hexiste pas 
en JavaScript). Lexpression 'C == 71 donne false. II faut done obtenir le code 
numerique du premier caractere de cette String. 
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Form . EventObserver 

Form.EventObserver est similaire a Form. Observer : il s'agit de determiner si un 
champ du formulaire a change de valeur depuis le dernier examen, et le cas echeant, 
d'appeler une fonction de rappel. 

SYNTAXE 
new Form. EventObserver (form, callback) 

Mais au lieu d'examiner periodiquement le formulaire, on reagit aux evenements. En 
l'occurrence, un Form.EventObserver enregistre un gestionnaire pour tous les 
champs du formulaire (evenement click pour les cases a cocher et boutons radio, 
evenement change pour les autres). C'est done plus immediat que Form. Observer, ce 
qui n'est pas forcement un mieux, suivant l'ergonomie recherchee. 

Form . Element. EventObserver 

On retrouve la relation Form / Form . El ement deja vue pour les observateurs bases sur 
intervalle. II s'agit ici de ne reagir qua 1' evenement de modification d'un seul champ. 

SYNTAXE 
new Form. Element. EventObserver(elt, callback) 



Insertions dynamiques 



Void notre derniere section. Apres cela, nous aurons fait le tour complet de 
Prototype 1.5.0, a l'exception de Position, que j'ai trouve bien trop complexe, et 
bien trop destine a des bibliotheques tierces plutot qua du code « developpeur de 
site », pour etre traite ici. 

L'insertion dynamique de contenu est potentiellement complexe a realiser manuelle- 
ment (surtout de facon portable !), et Prototype fait des merveilles. 

Les insertions sont basees sur un objet Abstract. Insertion, specialise pour chaque 
type d'insertion. C'est un schema courant dans Prototype, ou les observateurs specia- 
lisent aussi un objet « abstrait », par exemple. Une insertion se cree toujours avec 
deux arguments : l'objet de reference, et le (X)HTML representant le contenu a 
inserer. Le type d'insertion est defini par l'objet utilise. 
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SYNTAXE 

new Insertion. Before(elt, content) 

new Insertion. Top(elt, content) 

new Insertion. Bottom(elt, content) 

new Insertion. After (elt, content) 

Toute insertion precede de la meme maniere : le contenu sans ses eventuels scripts 
est insere, et immediatement apres (10 millisecondes plus tard, pour les puristes), ces 
fragments de scripts sont executes avec eval . II s'agit de la meme logique que celle 
vue dans Element. update et Element, replace. 

Les quatre insertions possibles correspondent aux quatre positions disponibles : 

• Before insere immediatement avant l'element ; 

• Top insere au debut du contenu de l'element ; 

• Bottom insere a la fin du contenu de l'element ; 

• After insere immediatement apres l'element. 

L'exemple fourni dans 1' archive des codes source pour ce livre illustre ces possibilites. 
En voici une capture d'ecran apres les quatre insertions. 



Figure 4-2 

L'exemple de cette section 
apres quatre insertions 
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Pour aller plus loin... 

Sites 

• Le site officiel de Prototype, pour recuperer la derniere version finalisee : 
http://prototype.conio.net/ 

• Le site officiel de script. aculo.us, pour disposer de nombreux effets et outils tout 
prets, et voir des utilisations avancees de Prototype : 

http://script.aculo.us/ 

• Les « fenetres Prototype », une bibliotheque tres sympathique de Sebastien Gruhier 
permettant de simuler des fenetres, modales ou non, avec une gestion de themes 
(skins), des fonctionnalites de debogage, et j'en passe. Basee sur Prototype et 
script. aculo.us, cette bibliotheque ouvre des horizons ! En plus, le site fournit une 
documentation de bonne qualite : 
http://prototype-window.xilinus.com/ 

Groupe de discussion 

Le groupe Google RubyOnRails-Spinoffs a ete cree en aout2006 pour servir de 
centre d'aide technique, avec les avantages d'indexation et de recherche de Google. 
On y trouve de nombreux membres avec un bon niveau technique : 
http://groups.google.com/group/rubyonrails-spinoffs 

Canal IRC 

Enfin, il faut noter qu'on trouve souvent une reponse rapide et fiable sur le canal IRC 
dedie a Prototype, heberge sur i'incontournable serveur i re . f reenode . net. Le canal 
se nomme tout simplement #prototype. 
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Ajax, ou I'art 
de chuchoter 

Jusqu'ici, nous avons examine les arcanes de JavaScript, et celles du DOM, qui est au 
cceur de la manipulation dynamique des pages. Ensuite, nous avons presente l'essen- 
tiel de la bibliotheque Prototype, qui rend nos codes JavaScript plus portables, mais 
surtout plus courts, plus simples, plus expressifs et tellement plus elegants. 

Comprendre et maitriser ces piliers du Web 2.0 constitue un prealable necessaire a 
l'apprentissage de cet univers technologique dont Ajax est le sujet phare. Nous avons 
deja etudie dans le detail le « J ». Restent les aspects « Asynchronous » et « XML ». 
Dans les chapitres qui suivent, nous allons decouvrir puis explorer en profondeur les 
composantes techniques concernees. 

On commencera par examiner la technologie nue, au travers de sa cle de voute, l'objet 
XMLHttpRequest, qui realise des requetes HTTP asynchrones pour le compte de 
scripts dans la page, et nous permet ensuite de traiter la reponse, en tant que document 
XML si besoin est. Bien comprendre les rouages de cet objet est indispensable pour 
eviter le risque d'une dependance a l'un ou l'autre des nombreux frameworks disponi- 
bles autour d'Ajax. Nous verrons que Prototype est, bien entendu, encore present pour 
nous faciliter grandement la tache, tant sur des utilisations triviales que plus avancees. 

Nous decouvrirons aussi quelques autres frameworks, au premier rang desquels 
l'incontournable script.aculo.us, de Thomas Fuchs. Non content d'avoir cree une 
bibliotheque portable d'effets visuels spectaculaires (lesquels, employes a bon escient, 
augmentent considerablement la qualite de notre ergonomie), Thomas nous offre une 
panoplie de solutions toutes pretes pour les emplois les plus courants d'Ajax, comme 
la completion automatique. 
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Les mains dans le cambouis 
avec XMLHttp Request 



L'objet XMLHttpRequest est responsable, a lui seul, des aspects asynchrone et XML 
d'Ajax. C'est lui qui va effectuer des requetes HTTP internes, invisibles, et asyn- 
chrones (s'executant en arriere-plan sans bloquer l'execution des scripts ou geler la 
page) a une couche serveur. C'est lui aussi qui va traiter la reponse, eventuellement en 
tant que document XML. 

Nous allons d'abord examiner ensemble l'anatomie d'une conversation Ajax entre 
une page web et la couche serveur. Nous installerons ensuite une couche serveur, jus- 
tement, afin de pouvoir realiser nos tests. Apres un petit rappel historique sur 
XMLHttpRequest, nous rentrerons dans les details techniques de son utilisation, et 
examinerons ensuite les differents types de reponse qu'on peut renvoyer, avec leurs 
interets respectifs. 



Anatomie d'une conversation Ajax 

Une conversation Ajax est constitute d'un ou plusieurs echanges, generalement asyn- 
chrones, entre la page web (au travers de son code JavaScript) et une couche serveur. 
On verra d'ailleurs au chapitre 8 que cette couche serveur peut etre extremement 
variee, et n'a en rien l'obligation de resider sur le meme serveur que vos pages. 
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Chaque echange suit la sequence que void : 

1 Creation (ou reutilisation) d'un requeteur. 

2 Association d'un gestionnaire d'etat (une fonction qui nous appartient et qui va 
notamment traiter la reponse quand celle-ci arrivera). 

3 Definition de la requete : mode de synchronisation, methode HTTP (GET, POST, 
etc.), URL destinataire, parametres et donnees eventuels. 

4 Envoi de la requete. 

5 Invocations du gestionnaire d'etat au fil du cycle de vie de la requete, en particulier 
aux stades suivants : lancement, receptions de parties de reponse, fin de reception 
de reponse. 

6 Lorsque la reponse a ete completement recue, traitement de celle-ci par notre 
code JavaScript (par exemple, insertion d'un nouvel element dans une liste, 
affichage de suggestions pour un champ de saisie, affichage d'une portion d'image 
supplementaire). 

II est important de bien comprendre qu'entre les etapes 4 et 5, la page « vit sa vie », 
ainsi que ses codes JavaScript. Elle n'est en aucun cas bloquee. II est toujours possible 
d'utiliser une requete synchrone, mais cela bloque justement la page le temps du trai- 
tement, et reduit a neant l'interet du systeme ! En asynchrone, l'utilisateur conserve 
la possibilite d'interagir avec elle. On verra que cet aspect, qui constitue l'avantage 
fondamental de la technologie, n'est toutefois pas sans dangers ergonomiques et 
necessite souvent une conception intelligente de l'interface. 

Dans ce chapitre, nous aurons l'occasion d'examiner et de manipuler toutes ces 
etapes en detail, mais il va de soi que dans une utilisation industrielle, sur des projets 
reels et potentiellement lourds, on ne saurait s'encombrer des details a chaque utilisa- 
tion. Les chapitres suivants nous montreront comment tirer parti de frameworks 
repandus pour masquer l'apparente complexite du processus et nous concentrer sur la 
partie fonctionnelle. 



Un petit serveur pour nos tests 

Afin de pouvoir tester du code Ajax, nous devons avoir mis en place une couche 
serveur. En termes concrets, il nous faut done, avant toute chose, un logiciel serveur 
HTTP installe, configure et en cours d'execution. Le tout doit resider soit sur notre 
propre machine, soit sur une machine joignable depuis la notre, puisque nous utilise- 
rons notre navigateur pour visualiser nos pages de demonstration. 
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Mais ce n'est pas tout. Si nous nous arretions la, cela impliquerait que les contenus 
renvoyes par ce serveur HTTP soient figes, ce qui reduit grandement l'interet des 
tests et demonstrations que nous pourrions mener. 

II faut done aussi que ce serveur prenne en charge un langage permettant de renvoyer 
un contenu dynamique. Le choix qui semble evident, pour cela, est PHP, en raison de 
sa popularite, de l'abondance de documentation et de sa prise en charge par virtuelle- 
ment tous les hebergeurs. Et pourtant, ce n'est pas le choix que nous retiendrons. 
Void pourquoi : 

1 Nous ne souhaitons pas lier la possibilite de mener les tests a la disponibilite d'un 
compte et d'un espace de stockage chez un hebergeur. L'argument de la prise en 
charge est done nul. 

2 Nous ne souhaitons pas lier la facilite de mise en place d'un serveur de test a la 
plate-forme. Bien que PHP soit facile a utiliser a des fins de test sous Windows, 
notamment avec des produits comme EasyPHP, il necessite une configuration 
elaboree sous Linux et Mac OS X. 

3 Nous souhaitons eviter les eventuels conflits de ressource entre le serveur de test 
et des services deja deployes. Ainsi, si vous etes developpeur (le simple fait que 
vous lisiez cet ouvrage signifie probablement que vous etes developpeur web, par 
exemple), vous avez peut-etre deja des serveurs MySQL, IIS ou Apache installes 
et operationnels sur votre machine. 

4 Nous souhaitons permettre aux lecteurs n'ayant pas une experience prealable d'un 
langage cote serveur de s'y retrouver sans trop de mal dans nos exemples. Le lan- 
gage retenu se doit done d'etre le plus lisible possible, ce qui n'est pas vraiment le 
cas de PHP, en particulier pour un neophyte. 

5 La configuration necessaire a nos tests doit etre la plus simple possible. En ce qui 
nous concerne, il s'agit simplement d'associer a certaines URL du serveur des 
morceaux de code aptes a generer du contenu dynamique. 

6 Le lancement et 1' arret du serveur, ainsi que le suivi de son execution, doivent etre 
simplifies au maximum. Ici, les serveurs classiques, meme emballes dans une 
interface centralisee comme EasyPHP, sont deja trop complexes, en particulier si 
la configuration pose probleme. Le suivi de l'execution, quant a lui, est tout sim- 
plement absent de tels outils, necessitant des commandes tierces comme le tai 1 
d'Unix, ainsi que la connaissance de l'emplacement des fichiers de journalisation. 

7 Plus subjectivement, j'estime qua technologie de pointe, langage de pointe ! Des 
possibilites comme PHP, JSP ou ASP reposent sur des langages rigides ou 
empreints d'idees anciennes. 

Pour toutes ces raisons, j'ai decide d'utiliser Ruby. 
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Pas de panique ! Peut-etre ce langage ne vous dit-il rien, ou peut-etre avez-vous deja 
apercu quelques bribes de code Ruby qui vous auraient semble exotiques. Toutefois, 
j'estime qu'il s'agit la d'un choix judicieux pour ce chapitre, a de nombreux titres. 
En miroir aux considerations listees precedemment, les principales raisons de mon 
choix sont : 

1 Ruby est tres facile a installer, tant sur Windows que Linux ou Mac OS X. L'ins- 
tallation fournit une large bibliotheque standard d'objets et de services, dont un 
serveur leger HTTP tout equipe, apte bien sur a executer du code Ruby pour 
generer du contenu. 

2 WEBrick, le serveur HTTP fourni dans la distribution standard de Ruby, est tres 
facile d'emploi. II nous suffira de quelques lignes de code tres simples pour decrire 
sa configuration, y compris l'association entre des URL et nos fonctions. 

3 Lancer le serveur se fait d'une courte saisie dans la ligne de commande. Larreter 
est l'affaire d'un simple Ctrl+C. Le suivi de l'execution a lieu automatiquement 
dans la console, sans avoir a chercher de fichiers de log. 

4 Puisque le serveur est sur notre propre machine, nul besoin d'un compte chez un 
hebergeur, ni de procedures fastidieuses de deploiement sur ce compte. 

5 Ruby est un langage tres facile a apprendre et a lire. Et meme si l'objet de ce cha- 
pitre n'est pas de vous enseigner les rudiments du langage (il ne s'agit apres tout 
ici que d'un outil au service de l'apprentissage des mecanismes Ajax), vous verrez 
que le code park de lui-meme (et quand ce n'est pas le cas, les explications neces- 
saires sont courtes). 

6 Ruby est un langage moderne, 100 % objet et tres flexible, extremement produc- 
tif, concu d'apres les lecons tirees de la mise en ceuvre des langages recents. 

7 Les principaux acteurs d'Ajax, notamment les auteurs des bibliotheques Prototype 
et script.aculo.us, sont tres impliques dans le framework Ruby on Rails (RoR), 
ecrit integralement en Ruby. Les deux technologies, qui contribuent a « elargir le 
champ des possibles » {push the envelope), ne sont done pas sans rapport. 

Installation de Ruby 

Commencons done par installer le necessaire sur votre machine ! Rassurez-vous, il ne 
s'agit pas ici d'installer un enorme systeme de developpement ; rien de commun avec 
Visual Studio.NET ou simplement le JDK de Sun. La taille varie suivant la plate- 
forme, mais dans tous les cas, elle est bien inferieur a 100 Mo. 
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Sous Windows 

Un excellent projet est tout specialement dedie aux developpeurs Ruby sous 
Windows : l'installateur Ruby « en 1 clic ». II s'agit d'un projet Open Source dispo- 
nible sur http://rubyinstaller.rubyforge.org. 

L'installateur met en place les elements suivants : 

• Une version tres recente de Ruby (a l'ecriture de ces lignes, la 1.8.4). 

• Lediteur libre SciTE (http://www.scintilla.org/SciTE.html), qui fournit de quoi 
travailler pour les developpeurs souhaitant un editeur puissant sans pour autant 
utiliser un EDI (environnement de developpement integre). 

• L'EDI FreeRIDE (http://freeride.rubyforge.org/wiki/wiki.pl), un environnement 
complet pour travailler avec Ruby, qui fournit les fonctionnalites habituelles de ce 
type de produit : coloration syntaxique, completion de code, modeles, execution, 
debogage, etc. 

• De nombreuses bibliotheques et outils Ruby couramment utilises. On y trouve 
entre autres Rake, l'outil de make dans l'univers Ruby ; et le systeme de bibliothe- 
ques RubyGems, qui formalise les bibliotheques Ruby. 

• La version HTML Help de l'ouvrage de reference, Programming Ruby, ecrit par 
Dave Thomas et Andy Hunt, les « Pragmatic Programmers », qui ont popularise 
Ruby en Occident. Attention toutefois, il s'agit de la premiere edition, pour 
Ruby 1.6. Une seconde edition, massivement amelioree et completee pour la ver- 
sion 1.8, est disponible (au format papier, PDF colorise, ou les deux). Elle est 
preferable si vous souhaitez decouvrir Ruby plus avant : 
http://pragmaticprogrammer.com/titles/ruby/index.html. 

Hormis Ruby lui-meme, tous ces composants sont optionnels. L'installateur est 
telechargeable ici : http://rubyforge.org/frs/?group_id=167. Une fois le telechargement 
termine, voici les etapes a suivre pour l'installation : 

1 Lancez le programme d'installation (par exemple, rubyl84-20 . exe). 

2 Choisissez Next, puis a l'ecran suivant I Agree. 

3 Cochez European Keyboards (active le symbole € dans l'interpreteur interactif i rb), 
quant au reste, libre a vous d'installer ce que vous voulez (l'espace disque total 
requis variera entre 83 et 87 Mo a l'heure ou j'ecris ces lignes). Selectionnez 
ensuite Next. 

4 Pour le chemin d'installation, C:\ruby est tres bien, mais si vous souhaitez le 
changer abstenez-vous de toute espace dans le chemin retenu, afin d'eviter les 
problemes potentiels. Cliquez sur Next. 

5 Changez le nom du groupe de programmes a quelque chose de plus generique, 
par exemple Ruby. Choisissez ensuite Install. 
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6 reinstallation s'execute. et prend un peu de temps car elle comporte de tees nombreux 
petits fichiers. 

7 En fin d'installation, choisissez Next. Decochez Show Readme et cliquez sur Finish. 

Et voila ! 

Jetez un ceil au groupe de programmes Ruby : il propose de nombreuses ressources de 
documentation, le serveur de documentation des gemmes (paquets Ruby) et f xri , outil 
regroupant un moteur de recherche dans l'aide en ligne (outil en ligne de commande : 
ri) et l'interpreteur interactif de Ruby (outil en ligne de commande : i rb). 

Pour information, les modifications apportees aux variables d'environnement sont les 
suivantes : 

• INPUTRC pour autoriser le symbole € dans i rb. 

• PATH inclut desormais C:\ruby\bin (adapte au chemin que vous avez choisi, 
evidemment), pour avoir acces aux nombreux programmes fournis : ruby, ri, i rb, 
rdoc, gem mais aussi iconv et fxri. 

• PATHEXT pour autoriser l'invocation de scripts . rb et . rbw comme des commandes 
classiques (ce que nous n'utiliserons pas). 

Autre point a regler sur Windows XP SP2 : l'avertissement du systeme chaque fois qu'on 
voudra lancer un serveur. La premiere fois que 9a vous arrivera, choisissez Debloquer. 

Sous Linux/BSD 

La plupart des distributions Linux et des BSD ont un systeme de paquetages, avec 
Ruby et les outils connexes (notamment Rake) disponibles sous forme de paquets. 
Entre autres distributions proposant Ruby, on trouve : 

• Debian et derives (Ubuntu, Kubuntu, etc.) ; 

• Mandriva (anciennement Mandrake) ; 

• SuSE et derives (comme OpenSuSE) ; 

• Red Hat Linux (et Fedora) ; 

• Slackware (au travers de paquets prepares sur LinuxPackages.net, par exemple) ; 

• FreeBSD, NetBSD et OpenBSD. 

Qui plus est, la majorite des distributions Linux ont deja Ruby installe, car un 
nombre croissant d'outils Linux sont realises en Ruby. Commencez done par ouvrir 
un shell et taper la commande : 



I ruby -v 
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Si vous obtenez un numero de version d'au moins 1.8 (par exemple « ruby 1.8.4 
(2005-12-24) [i486-"linux] ») plutot qu'un message d'erreur du type « commande 
introuvable », vous n'avez aucune installation a faire. Dans le second cas, retentez 
tout de meme votre chance avec la commande rubyl. 8 plutot que simplement ruby. 

Notez que pour disposer de WEBrick, la bibliotheque de serveur HTTP leger, il 
vous faut au moins la version 1.8.0 de Ruby, mais cette version datant d'aout 2003, 
une distribution n'en disposant pas ferait veritablement figure de brontosaure. 

Les utilisateurs de Linux n'ont normalement pas de difficulte a installer des paquets, 
qu'ils passent par des outils graphiques comme SynaptiK ou utilisent des outils en 
ligne de commande, par exemple apt-get ou aptitude. Le nom du paquet est en 
general tout simplement ruby. 

Sous Mac OS X 

Un installateur « 1 clic » pour OS X est en cours de creation a l'heure ou nous ecri- 
vons ces lignes, par la meme equipe que celle de son homologue Windows. 

Toutefois, Ruby est d'ores et deja simple a installer sous Mac OS X. Apres tout, un 
tres grand nombre de developpeurs Ruby, et la majorite des developpeurs Rails 
(RoR, vous vous souvenez ?) sont sur Mac OS X. 

Tout d'abord, si vous tournez sous Jaguar (10.3) ou ulterieur, Ruby est installe 
d'entree de jeu. Si vous etes encore sur Panther (10.2), vous trouverez un .dmg de 
Ruby 1.8.2 sur la page http://homepage.mac.com/discord/Ruby/ (d'ailleurs, il y en a un 
pour Jaguar aussi). 

Depuis Puma (10.4), Ruby est tres bien pris en charge sur Mac, au point que meme 
Ruby on Rails est installe d'office ! 

Un mot sur le cache 

Enfin, je precise que quel que soit le systeme d'exploitation, le cache du navigateur 
peut parfois empecher le bon fonctionnement des exemples, en particulier lorsqu'on 
les teste les uns apres les autres a un bref intervalle (les fichiers CSS et JS pour la 
plupart s'appellent client. ess et client.js, mais ils changent d'un exemple a 
l'autre). Leffet de cookies mis a jour n'est pas non plus visible si on passe par le cache. 
Lannexe D traite en detail de la configuration du cache dans les principaux naviga- 
teurs. Effectuez cette manipulation, sous peine d'obtenir des comportements tres 
curieux au fil des exemples... 
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Un petit serveur HTTP et un code dynamique simple 

Void un script Ruby qui contient tout notre premier serveur de test ! 
Listing 5-1 Notre premier serveur, avec deux actions distinctes 

#! /usr/bin/env ruby Q 

require 'webrick'0 
include WEBrick 

server = HTTPServer. new (: Port => 8042) 

server .mount_proc(' /hi ') do | request, response | 

response. body = 'Bonjour ! ' 
end 

server .mount_proc(' /time') do Irequest, response | 

response. body = Ti me . now . to_s 
end 

trap('INT') { server . shutdown } 

server. start Q 

(Linux/OS X) Permet de lancer ce script comme un executable normal. 

Declare un besoin du module webrick et l'importe dans notre script. 

Configure un serveur HTTP sur le port 8042. 

Associe FURL /hi a une reponse figee, « Bonjour ! ». 

Associe l'URL /time a une reponse dynamique, contenant la date et l'heure au 

moment de la requete. 
Reagira a l'interruption (Ctrl+C) en arretant le serveur. 
Demarre le serveur web ! 

Comme vous pouvez le constater, il ne faut que tees peu de lignes, assez comprehensibles, 
pour creer de toutes pieces un serveur web, associer des contenus fixe ou dynamique a 
deux URL, s'assurer de pouvoir le fermer proprement, et finalement le demarrer ! 

Sauvegardez ce code dans un fichier nomme hi_timed. rb, puis ouvrez une console 
(ce que Windows nomme une « invite de commandes »), placez-vous dans le repertoire 
contenant le fichier, et tapez simplement : 



ruby hi_timed.rb 
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Vous allez obtenir un affichage similaire a ceci : 

[2006-06-12 23:02:25] INFO WEBrick 1.3.1 

[2006-06-12 23:02:25] INFO ruby 1.8.4 (2005-12-24) [i486-linux] 

[2006-06-12 23:02:25] INFO WEBrick: :HTTPServer#start: pid=16951 
+■ port=8042 

Ouvrez a present un navigateur et allez sur http://localhost:8042/hi. Vous devez voir 
apparaitre le texte « Bonjour ! ». Dans la console ou vous avez lance le serveur, vous 
remarquez qu'un journal de requetes est en train de se constituer, ce qui est bien pratique 
lors du debogage : 

[2006-06-12 23:02:25] INFO WEBrick 1.3.1 

[2006-06-12 23:02:25] INFO ruby 1.8.4 (2005-12-24) [i486-linux] 

[2006-06-12 23:02:25] INFO WEBrick: :HTTPServer#start: pid=16951 

*» port=8042 
local host. local domain - - [12/Jun/2006: 23:04:11 CEST] "GET /hi 

* HTTP/1.1" 200 9 

- -> /hi 

[2006-06-12 23:04:12] ERROR '/favicon.ico' not found. 

local host. local domain - - [12/Jun/2006: 23:04:12 CEST] "GET /favicon.ico 
*■ HTTP/1.1" 404 281 

- -> /favicon.ico 

Chaque requete genere au moins deux lignes : la premiere qui identifie la machine 
cliente (ici, vous-meme), la date et l'heure de la requete, le type de requete effectuee 
(par exemple « GET /hi HTTP/1 . 1 »), le code de reponse (200 : tout va bien) et la taille 
du contenu renvoye (9 octets, soit le nombre de caracteres dans « bonjour ! »). La 
seconde ligne indique le chemin absolu, au sein du serveur, de la ressource demandee. 

Vous etes peut-etre surpris de voir une demande pour /f avi con . i co, que vous n'avez 
pas faite. Tout navigateur la fait apres une premiere requete sur un site, pour tenter de 
recuperer une petite icone identifiant le site, qui sera alors affichee a cote de FURL, 
associee a un eventuel marque-page, placee dans l'onglet de la page s'il existe, etc. 

Interessons-nous a present a Taction dynamique que nous avons mise en place, pour 
l'horodatage : naviguez sur http://localhost:8042/time. Vous obtenez un resultat du type : 



I 



Mon :un 12 23:09:44 CEST 2006 



II s'agit de la representation textuelle par defaut d'une date en Ruby, qui suit le format 
standard de la RFC 2822 (format qu'on retrouve, en interne, dans les protocoles de 
messagerie electro nique et de consultation de pages web, par exemple). Ce nest certes 
pas ce qu'il y a de plus lisible, mais qu'importe : cela nous permet de montrer l'aspect 
dynamique. En effet, si vous rafraichissez la page dans votre navigateur, vous voyez 
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que la date est mise a jour. Le petit morceau de code Ruby dans notre serveur est 
invoque a chaque requete et change son resultat a chaque fois. Nous avons la de quoi 
tester Ajax sur des bases plus interessantes qu'avec un simple contenu statique. 

Arretons a present notre petit serveur d'exemple : il nous suffit de reprendre la console et 
de taper Ctrl+C. Le serveur s'arrete en cloturant son journal de quelques lignes stoiques : 

[2006-06-12 23:13:35] INFO going to shutdown ... 
[2006-06-12 23:13:35] INFO WEBrick: : HTTPServer#start done. 

A present que nous avons tout le necessaire pour simuler une application cote ser- 
veur, rendant ainsi notre exploration dAjax plus interessante, il nous faut faire con- 
naissance avec le veritable moteur dAjax, l'objet responsable du « A » initial : le 
mecanisme de requetes asynchrones. 



La petite histoire de XMLHttpRequest 

C'est grace a l'objet XMLHttpRequest qu'une page web, par l'intermediaire de code 
JavaScript, peut « discuter », en coulisses, avec des serveurs (en effet, il ne s'agit pas 
obligatoirement du meme serveur que celui dont provient la page). 

Origines et historique 

Rendons a Cesar ce qui lui appartient : dans une sphere technologique ou Microsoft, 
depuis la sortie de MSIE 5 en 1999, n'a guere brille par son sens de l'innovation, il 
faut souligner que c'est au sein de MSIE, et des la version 5 justement, quest apparu 
XMLHttpRequest. II etait (tout comme dans les versions 5.5 et 6.0) fourni sous forme 
d'un ActiveX. La premiere implementation compatible est apparue en 2002 dans 
Mozilla 1.0 (on le trouve done egalement dans Firefox et Camino) et les autres navi- 
gateurs ont suivi le mouvement : Safari a partir de la version , Konqueror, Opera 
depuis la version 8.0, et meme le plus modeste iCab. 

Au cceur d'Ajax, XMLHttpRequest est tellement utile et repandu que son API, a 
l'origine proprietaire, est en train de faire l'objet d'une standardisation par le W3C 
(http://www.w3.org/TR/XMLHttpRequest/; une traduction francaise est disponible 
sur http://www.xul.fr/XMLHttpRequest.html) avec un deuxieme jet (working draft) au 
19juin2006. 



Les mains dans le cambouis avec XMLHttpRequest 

Chapitre 5 

Bien preparer un echange asynchrone 

D'un didacticiel a l'autre, on voit plusieurs manieres de preparer une requete 
asynchrone. Comme nous l'avons vu en debut de chapitre, le processus comporte un 
certain nombre d'etapes. Nous allons voir ensemble le detail, en insistant sur une 
methodologie qui nous semble optimale. Mais avant, voici un petit rappel de la diffe- 
rence significative entre MSIE 6 et versions anterieures d'une part, et les autres 
navigateurs d'autre part. 

ActiveX versus objet natif JavaScript 

Jusqu'a la creation d'une implementation compatible par Mozilla en 2002, 
XMLHttpRequest restait une technologie centree sur MSIE. II n'est done pas surprenant 
qu'il ait ete fourni sous forme d' ActiveX, technologie qui, en 1999, n'avait pas encore vu 
sa reputation detruite a coups d'innombrables failles de securite et usages abusifs. 

Cependant, les autres navigateurs, qui n'implementent pas ActiveXintentionnelle- 
ment, principalement pour des raisons de securite justement, ont naturellement opte 
pour un choix plus rationnel et, techniquement, plus simple : la mise a disposition de 
cette fonctionnalite sous forme d'objet natif JavaScript, bien plus facile a utiliser. 

Si cette forme de mise a disposition, la seule qui puisse etre multinavigateur, est 
aujourd'hui bien retenue (elle est exigee par la standardisation en cours du W3C, 
et Microsoft a annonce que MSIE 7 utiliserait cette forme egalement : http:// 
blogs.msdn.com/ie/archive/2006/01/23/516393.aspx), il reste un schisme entre les deux 
modes de mise a disposition, fosse qui n'est pas pres de se resorber : on sait deja que 
MSIE 7 ne sera disponible que sur des Windows XP SP2 a la licence verifiee, ce qui 
constitue une partie plutot minoritaire du pare Windows deploye. Les entreprises, 
notamment, sont souvent restees sur Windows 2000, voire Windows Me ou 
Windows 98. Pour tous ces postes, ainsi que les XP, XP SP1 etXP SP2 illegaux (tres 
repandus, par exemple, sur le marche asiatique), il faudra choisir entre rester sur 
MSIE 6 ou passer sur un autre navigateur, la principale alternative etant Firefox. 

Creer 1 'objet requeteur 

Mais les grands pares de machines ne basculent pas rapidement, et pour quelques 
annees encore en tout cas, nous allons devoir ecrire du code capable d'accommoder 
tant MSIE avant sa version 7 que les autres navigateurs. Voici, ci-apres, une premiere 
version, peut-etre un peu brutale, d'une fonction portable de creation d'un objet 
XMLHttpRequest (sans utiliser Prototype pour l'instant). 
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Listing 5-2 Une premiere tentative d'obtention portable 

function getRequesterO { 
try { 

return new ActiveX0bject('Msxml2.XMLHTTP') ; 
} catch (e) { 
} 
try { 

return new ActiveXObject('Microsoft.XMLHTTP') ; 
} catch (e) { 
} 
try { 

return new XMLHttpRequestO ; 
} catch (e) { 
} 

return false; 
} 

On voit que l'objet a, au fil du temps, ete disponible sous plusieurs noms differents : 
d'abord Microsoft.XMLHTTP, puis plus tard, Msxml 2. XMLHTTP. Quanta son utilisation 
comme objet natif JavaScript, elle est des plus simples. 

Cet algorithme a l'avantage de se factoriser facilement (le code Prototype qui realise 
cette tache, a savoir Ajax.getTransportO, n'est pas sans une certaine esthetique), 
mais si vous souhaitez minimiser le nombre d'exceptions levees, vous pouvez utiliser 
une autre variante, tres repandue dans les articles et didacticiels sur le sujet. 

Listing 5-3 Une version avec les commentaires conditionnels MSIE 

function getRequesterO { 

var result = false; 
/*@cc_on @*/ 
/*@if (@_jscript_version >= 5) 

try { 

result = new ActiveX0bject("Msxml2 .XMLHTTP") ; 
} catch (e) { 
try { 

result = new ActiveXObject("Microsoft. XMLHTTP") ; 
} catch (E) { 

result = false; 
} 
} 
@end @*/ 
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if (! result && 'undefined' != typeof XMLHttpRequest) { 
try { 

result = new XMLHttpRequestO ; 
} catch (e) { 

result = false; 
} 
} 

return result; 
} 

Notez les syntaxes specifiques a MSIE, qui constituent des commentaires conditionnels. 
Ici, MSIE ignorera le commentaire s'il est sur une version inferieure a 5, tandis que les 
autres navigateurs les ignoreront systematiquement. 

Ce code peut sembler fute, mais a mon sens, il s'agit la de beaucoup de bruit pour 
rien, sans parler de la pollution visuelle engendree par la syntaxe proprietaire des 
commentaires conditionnels. Dans une application web, meme exigeante, on ima- 
gine difficilement plus d'une dizaine de demandes de requeteurs a la seconde (et le 
plus souvent, bien moins que 9a), et le « gaspillage » de temps cause par les levees 
supplementaires d'exceptions se chiffre au pire en centiemes de secondes. 

C'est pourquoi, a Tissue de cette section consacree a examiner les entrailles de l'API 
XMLHttpRequest, nous utiliserons les enrobages de confort proposes par Prototype ; 
meme si, par exemple, l'obtention d'un requeteur y utilise un algorithme similaire a 
notre premiere tentative, le gain de productivite et l'ecart infinitesimal des perfor- 
mances justifient pleinement cette decision. 

Decrire notre requete 

Techniquement, l'ordre recommande d'initialisation d'un objet XMLHttpRequest sup- 
pose une etape supplemental avant de preparer la requete ; pourtant, nous allons 
suivre un ordre plus logique pour l'instant et ceder aux exigences techniques un peu 
plus tard. 

Pour configurer une requete, on doit d'abord l'ouvrir (et ce n'est pas tous les jours 
qu'on vous encourage a l'ouvrir), en indiquant : 

1 la methode HTTP utilisee (par exemple, GET ou POST) ; 

2 l'URL de la ressource dynamique a requeter cote serveur ; 

3 le mode de synchronisation (asynchrone par defaut, mais on peut passer en syn- 
chrone, bien que ce soit plutot une heresie !) ; 

4 une authentification HTTP optionnelle (identifiant, mot de passe), si la ressource 
cote serveur en necessite une. 
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Cette initialisation s'effectue avec la methode open. Par exemple : 

var requester = getRequesterO ; 

requester .open("POST" , "/blog/comment" , true); 

Une requete HTTP, outre sa methode et son URL cible, est constituee (comme 
nombre de requetes/reponses dans les protocoles qui font vivre le Web) d'en-tetes et 
d'un corps. Les en-tetes permettent de decrire une foule de choses, comme le type de 
resultat attendu, les formats de donnees acceptes, le type d'encodage employe pour le 
corps de la requete, etc. On les definit a l'aide de la methode setRequestHeader. 

Ainsi par exemple, il est parfois necessaire de circonvenir la politique agressive de 
cache des resultats de requetes GET mise en ceuvre par MSIE, notamment dans le 
cadre de requetes internes effectuees a intervalles potentiellement tres faibles. On 
peut realiser cela en utilisant un en-tete approprie pour la requete, comme ceci : 

requester .setRequestHeader("If-Modified-Si nee" , "Sat, 1 Jan 2000 
00:00:00 GMT"); 

Quant au corps de la requete, il faut d'abord savoir qu'il n'y en a pas forcement. 
Ainsi, une requete de type GET encode tous ses parametres dans l'URL, ce qui sup- 
pose un envoi de corps vide (null). En revanche, une requete POST ou PUT utilise 
frequemment des donnees fournies par le corps de la requete (les champs d'un 
formulaire y figurent, par exemple). 



Envoyer la requete 

Le corps de la requete est fourni au moment de l'envoi de celle-ci, a l'aide de la 
methode send. Void deux exemples de requete, une en GET et une en POST : 

Listing 5-4 Deux exemples de requete, I'une en GET, I'autre en POST 

requester .open ("GET" , "/b"log/comments?article_id=183") ; 
requester .send(null) ; 

requester .open ("POST" , "/blog/comment") ; 

requester .send ("a rticle_i d=183&aut ho r_name=TDD&aut ho r_email=tdd@example 

. com&comment=Voici+un+exemple+de+requete+P0ST") ; 

Ne soyez pas alarmes par l'aspect du deuxieme appel a send : cet encodage particulier 
des donnees, qui correspond a l'encodage par defaut pour les methodes POST et PUT, 
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a savoir le format application/x-www-form-urlencoded, peut etre realise automati- 
quement par JavaScript. 

Une fois la requete lancee, il ne reste plus qua en suivre la progression pour finale- 
ment recuperer les resultats eventuels. 



Recevoir et traiter la reponse 



C'est ici que la realite technique nous rattrape, car pour suivre la progression de la 
requete (de sa creation a la fin de la recuperation de la reponse du serveur), il faut s'y 
etre pris a l'avance, en creant ce qu'on appelle une fonction de rappel, c'est-a-dire une 
fonction de votre cru, respectant une certaine forme, qui sera appelee par le systeme 
dans certaines circonstances. 

Ici, il s'agit d'une fonction sans argument particulier, mais qui devra pouvoir acceder 
a votre objet requeteur pour interroger son etat. On l'associe a l'objet en l'affectant a 
la propriete onreadystatechange. Cette association se fait de preference avant 
l'appel a open (sauf si on tente de reutiliser le meme requeteur par la suite dans 
MSIE, auquel cas il vaut mieux la faire apres). 

La fonction va interroger l'etat actuel du requeteur, en examinant sa propriete 
readyState. Au fur et a mesure du cycle de vie du requeteur, cette propriete peut 
prendre les valeurs suivantes : 

1 non initialise (pas encore d'appel a open) ; 

2 ouvert (un appel a open a ete correctement execute) ; 

3 envoye (la requete a ete preparee, l'appel a send a eu lieu) ; 

4 en reception (des donnees arrivent, mais ce n'est pas fini) ; 

5 reception terminee (toutes les donnees sont arrivees, on peut a present consulter 
la reponse du serveur). 

Void un code mettant en place une fonction de rappel qui, lorsque la requete aura 
abouti, affichera le resultat dans une boite de message : 

requester .onreadystatechange = functionO { 

if (4 == requester. readyState && 200 == requester. status) 
alert(requester . responseText) ; 

}; 

Le resultat de la requete comprend un statut HTTP (le code 200 indique que tout 
s'est bien passe), consultable via la propriete status, et un corps de reponse. La 
propriete responseText fournit le « texte brut » de cette reponse, quel qu'en soit le 
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format (XML, JSON, XHTML, etc.), mais si la reponse est un format XML et 
qu'on souhaite le traiter comme tel (comme un document XML manipulable a l'aide 
des interfaces du DOM), on peut utiliser responseXML. 



Une utilisation complete de notre petit serveur d'exemple 

Nous allons a present assembler ces fragments de code dans un tout coherent. Pour 
commencer, il va nous falloir quelques fichiers statiques : une page HTML mais 
aussi un fichier JavaScript (et meme deux, car nous allons utiliser Prototype pour 
nous simplifier les parties non Ajax). 

Le script serveur que nous avions ecrit ne prevoit pas de laisser un acces a un reper- 
toire du disque : seuls deux points d'acces sont prevus, /hi et /time, qui amenent 
tout droit sur du code Ruby. Nous devons done arreter ce script (un simple Ctrl+C 
dans la console), le modifier comme ci-apres, et le relancer (en tapant simplement 
ruby hi_timed. rb, comme tout a l'heure) apres avoir cree, au meme niveau, un 
repertoire doc root destine a accueillir nos fichiers statiques. 

Listing 5-5 Script serveur modifie pour gerer un repertoire racine 

#! /usr/bin/env ruby 

require 'webrick' 
include WEBrick 

server = HTTPServer. new (: Port => 8042) 

server .mountC'/' . HTTPServlet: :FileHandler , ' ./docroot ') Q 

server .mount_proc('/hi ') do | request, responsel 

response. body = 'Bonjour !' 
end 

server .mount_proc('/time') do | request, responsel 

response. body = Time. now. to_s 
end 

trap('INT') { server . shutdown } 

server .start 

La ligne Q associe a la racine de nos URL le repertoire docroot situe au meme 
niveau que notre script hi_timed. rb. 
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Le nom du repertoire n'a bien sur rien d'obligatoire, puisque nous le precisons dans 
le script. Nous allons y deposer trois fichiers : 

1 Notre fichier HTML, qui fournit simplement la page de test. 

2 Le fichier JavaScript de Prototype. 

3 Notre fichier JavaScript, qui va associer des comportements aux boutons de notre 
page, et effectuer les requetes Ajax. 

Void le code, tres simple, de notre fichier HTML. 

Listing 5-6 Notre page hi_timed_client.html pour cet exemple trivial d'Ajax 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www.w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

*» xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

charset=iso-8859-15" /> 
<title>Exemple Ajax trivial</title> 

<script type="text/ javascript" src="prototype. js"x/script> 
<script type=" text/ javascript" src="hi_timed_client . js"x/script> 
</head> 
<body> 

<hl>Exemple Ajax trivial</hl> 

<form> 

<P> 

<input type="button" id="btnGreet" value="Salut !" /> 

<input type="button" id="btnWhatTime" value="Quelle heure est-il ?" /> 

</p> 
</form> 

</body> 
</html> 

Vous pouvez recuperer le fichier JavaScript dans l'archive des codes source de ce livre, 
sur le site des editions Eyrolles. 

Enfin, voici le code source de notre fichier JavaScript, avec quelques commentaires 
de rappel sur la partie Ajax. Si vous avez des doutes sur les autres parties (association 
de gestionnaires d'evenements, etc.), feuilletez done les chapitres 3 et 4 pour 
retrouver vos marques. 
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Listing 5-7 Notre fichier JavaScript, hi_timed_client.js 

function askTime(e) { Q 

var requester = getRequesterO ; 

requester. onreadystatechange = functionO { 

if (4 == requester. readyState && 200 == requester. status) 
alert("Maintenant : " + requester. responseText) ; 

}; 

requester. open("CET" , "/time", true); 
requester. send (null) ; 
} // askTime 

function bindButtons(e) { 

Event . observe ($('btnGreet ') , "click", greet, false); 

Event .observe($('btnWhatTime') , "click", askTime, false); 
} // bindButtons 

function getRequesterO { © 

var result = false; 
/*@cc_on @*/ 

/*@if (@_jscript_version >= 5) 
try { 

result = new ActiveX0bject("Msxml2 .XMLHTTP") ; 
} catch (e) { 
try { 

result = new Acti veXObject("Microsoft. XMLHTTP") ; 
} catch (E) { 

result = false; 
} 
} 
@end @*/ 

if (! result && 'undefined' != typeof XMLHttpRequest) { 
try { 

result = new XMLHttpRequestO ; 
} catch (e) { 

result = false; 
} 
} 

return result; 
} // getRequester 

function greet(e) { Q 

var requester = getRequesterO; 

requester. onreadystatechange = functionO { 

if (4 == requester. readyState && 200 == requester. status) 
alert(requester. responseText) ; 

}; 

requester. open("CET" , "/hi", true); 
requester. send (null) ; 
} // greet 

Event. observe(window, "load", bindButtons, false); 
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O Void la fonction qu'on associera a notre bouton « Quelle heure est-il ? ». On y 
retrouve les differents blocs de code vus plus haut : l'obtention d'un requeteur, 
1'association d'un gestionnaire d'etat, la detection d'une reponse terminee et 
valide ainsi que l'envoi de la requete. 

Q Revoici notre fonction d'obtention de requeteur, avec ses commentaires condi- 
tionnels MSIE. On pourrait polemiquer longuement sur le meilleur algorithme 
d'obtention, mais ce serait inutile puisque, a partir du prochain chapitre, nous 
basculerons sur les fonctions Ajax de Prototype de toutes facons. 

© Void le gestionnaire associe au clic sur le bouton « Salut ! ». II est presque identi- 
que a celui de « Quelle heure est-il ? ». La seule difference est qu'il ne prefrxe pas 
le texte de retour. 

Voila, les acteurs sont en place, la premiere peut commencer : si ce n'est deja fait, 
lancez votre script serveur, puis ouvrez un navigateur et allez sur http://localhost:8042/ 
hi_timed_client.html. Vous devriez obtenir un affichage similaire a celui-ci. 



Figure 5-1 

Notre page de test 
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Cliquez sur le bouton « Salut ! ». La page ne se recharge absolument pas, mais un 
petit appel du pied au serveur nous renvoie le texte « Bonjour ! », que notre gestion- 
naire d'etat s'empresse d'afficher avec un alert. 

Essayez a present avec le bouton « Quelle heure est-il ? » : vous obtenez un affichage 
(certes en anglais, et plus precisement au format defini par la RFC 2822) de la date 
et l'heure courante. Plusieurs tentatives amenent evidemment un resultat different, 
carle temps passe... 
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Comment surveiller les echanges Ajax de nos pages ? 

Lorsqu'on met au point une fonctionnalite basee sur Ajax et que des bogues appa- 
raissent, il est vite frustrant de ne pas avoir un oeil sur le contenu detaille des reponses 
que nous fournit le serveur. 

Nous avons deja evoque 1' extension Firebug et ses inspecteurs et debogueurs pour le 
DOM, CSS, JavaScript et HTML, tous facilement visibles dans un espace en bas de 
page. Cette extension permet aussi de surveiller les requetes et reponses recuperees 
par XMLHttpRequest. 



Figure 5-2 
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Pour activer le suivi des requetes Ajax (desactive par defaut), deroulez le menu 
Options du panneau et cochez l'option Show XMLHttpRequests. Apres quoi, void 
l'aspect du panneau apres un clic sur chacun de nos deux boutons : 



Figure 5-3 

Firebug nous signale 
nos deux requetes Ajax. 
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En deroulant ces lignes de resultat et en choisissant l'onglet Headers pour Fun d'eux, 
on a une idee des informations (detaillees !) qui nous sont proposees : 



Figure 5-4 
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II existe de nombreux outils d'aide au developpement web, et meme si a l'heure ou 
j'ecris ces lignes, MSIE ne dispose pas, a ma connaissance, d'une aide au suivi des 
requetes Ajax, il existera peut-etre une solution, meme partielle, d'ici la parution de 
ce livre. 



Types de reponse : XHTML, XML, JS, JSON... 

Les lecteurs attentifs (je suis sur que vous en faites partie) auront sans doute 
remarque dans l'avant-propos une mention de reponses Ajax utilisant autre chose 
que du XHTML ou du XML. Apres tout, si nous examinons les reponses de notre 
petit exemple precedent, nous voyons qu'il ne renvoie pas un format particulier : il 
renvoie une seule donnee, textuelle, tees simple. Pas de balisage XML, pas de balises 
XHTML, pas de code JavaScript... 

En effet, dans la mesure ou e'est votre code qui interprete la reponse, vous avez le 
champ libre quant au format de celle-ci. II vous appartient de choisir au mieux, en 
utilisant un format qui facilite le traitement cote client, sans pour autant etre penible 
a generer cote serveur. 
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II existe plusieurs types de reponse assez repandus, que nous allons exposer un peu 
plus loin, avec un exemple concret pour chacun. Mais gardez a l'esprit qu'il n'y a pas 
vraiment de contraintes, hormis la difficulte que poserait probablement le traitement 
de donnees binaires en JavaScript : on se limitera normalement a des reponses de 
type texte. 

Bien choisir son type de reponse 

II s'agit de refiechir au cas par cas. Dans 1' exemple precedent, nous souhaitions sim- 
plement recuperer une information unique, pour ne pas dire atomique, sans structure 
ou complexite aucune. Ne pas s'encombrer d'un format specifique est alors une bonne 
solution ! D'autres fois, il faudra choisir judicieusement le format. Comment faire ? 

Commencons deja par nous poser la question de ce que constitue un « bon 
candidat ». Un bon format pour une reponse Ajax devrait, idealement, satisfaire aux 
criteres suivants : 

• II est facile a traiter cote client, en JavaScript done. On verra qua l'heure actuelle, 
cela limite (nativement en tout cas) les reponses XML vers MSIE et Safari. En 
revanche, du XHTML genere cote serveur peut etre facilement injecte dans le 
DOM de la page, du JavaScript peut etre evalue, ainsi que JSON, fatalement 
(pourquoi fatalement ? Un peu de patience...). 

• II n'est pas inutilement encombrant : plus la representation est simple, plus son 
analyse est facile, notamment pour un format structure qui n'est pas couvert par 
les objets JavaScript disponibles. 

• II est facile a generer cote serveur. Ce dernier point est generalement garanti : a 
moins d'utiliser une technologie quelque peu contraignante cote serveur (je ne 
peux m'empecher de penser aux pages ASP en Visual Basic), celui-ci dispose de 
toute la richesse fonctionnelle necessaire a la creation de tous types de contenus. 

Sur ces bases, nous pouvons passer en revue les differents formats de reponse 
courants : 

• Texte simple : par definition, trivial a generer comme a traiter cote client. Parti- 
culierement approprie pour les donnees toutes simples : petits morceaux de texte, 
valeurs numeriques (pouvant representer aussi des dates et heures, des booleens et 
bien d'autres choses), etc. 

• XHTML : cote client, e'est trivial. On peut inserer le fragment retourne au beau 
milieu du DOM de la page, en douceur. Ce n'est pourtant pas toujours approprie, 
techniquement ou conceptuellement, comme nous le detaillerons plus loin. 

• XML : relativement facile a generer cote serveur, sa facilite de traitement cote 
client depend directement de sa taille et du navigateur. MSIE et Safari ne 
supportent pas le DOM niveau 3 XPath, ce qui rend tout de suite plus compli- 
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quee l'analyse de XML complexe. Ce n'est en revanche pas un souci pour des 
documents de faible envergure. C'est d'ailleurs un des deux formats les plus 
appropries pour des donnees structurees. 

• JavaScript : assez facile a generer cote serveur, il est absolument trivial a traiter 
cote client : il suffit de l'evaluer, a l'aide d'un simple appel de methode. Evidem- 
ment, il faut etre sur de la fiabilite du script ainsi recupere. On limite en general a 
ses propres serveurs... Parfait pour permettre a la couche serveur de renvoyer des 
traitements de nature dynamique (onverra des exemples plus loin). 

• JSON : facile a generer cote serveur et trivial a traiter cote client, puisqu'il s'agit 
en fait d'une expression JavaScript valide. Ideal pour passer des informations 
structurees specifiques, le code de traitement JavaScript pouvant etre assez reduit 
par comparaison a l'analyse d'une grappe XML equivalente. 

Mais treve de conseils generaux, rien ne vaut la pratique ! Nous allons mettre en 
oeuvre un exemple concret pour chaque cas de figure, afin de vous aider a mieux 
cerner les avantages et inconvenients de chaque format. Ce sera aussi l'occasion de 
detailler leurs contextes techniques. 

Gardez a l'esprit que nombre de ces exemples seraient probablement plus simples en 
utilisant une bibliotheque comme Prototype. C'est d'ailleurs ce que nous ferons, sur 
des donnees plus riches, au chapitre suivant. Mais il est important que vous saisissiez 
bien, au prealable, les tenants et aboutissants de chaque demarche. 

Une reponse textuelle simple : renvoyer une donnee basique 

Ce type de reponse est approprie a bien des cas de figure. Afin d'ancrer la notion, 
nous allons voir deux exemples : le premier utilisant des cookies mais simple cote 
client, le second tees simple cote serveur, mais un peu plus lourd cote client. 

Exemple 1 : sauvegarde automatique 

Dans une application Ajax, il arrive frequemment que des requetes Ajax n'attendent 
pas de resultat particulier. De telles requetes servent generalement a « tenir le serveur 
au courant » de ce qui se passe cote client, par exemple de la personnalisation de 
l'interface qu'effectue l'utilisateur (comme le changement de la disposition des blocs 
de contenu), l'ajout de contenu, etc. Lorsque l'information est creee cote client et 
que le serveur ha rien a y apporter, il se contente de l'enregistrer. 

En revanche, la partie client aimerait sans doute savoir si l'enregistrement s'est bien 
passe. Peut-etre la couche serveur a-t-elle expire sa session, necessitant une nouvelle 
authentification ? Peut-etre a-t-elle un souci d'acces a la base de donnees, ou un pro- 
bleme de quota disque ? Ces problemes n'engendreront pas forcement une erreur de 
la couche serveur (que nous pourrions detecter en examinant la propriete status). 
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Afin de construire un systeme robuste, nous devons developper un code pare a toute 
eventualite, et done a meme de savoir si le traitement n'a pu s'effectuer. 

En termes de requete/reponse, e'est assez simple : il suffit de definir que ces requetes 
attendent une reponse exprimant un code de statut. On peut s'inspirer des codes 
HTTP, et decider par exemple que nous renverrons une ligne de texte demarrant par 
un code numerique generique (200 = OK, etc.), suivi d'un eventuel message a usage 
plutot interne, potentiellement utile au debogage. 

Afin d'illustrer un tel comportement, nous allons realiser un petit systeme de sauve- 
garde automatique d'un champ texte. Le scenario d'utilisation de la page est le suivant : 

1 On arrive sur la page pour la premiere fois. Le champ a une valeur par defaut, par 
exemple « Saisissez votre nom ici ». 

2 On modifie le nom et on quitte le champ en cliquant ailleurs sur la page, en cli- 
quant sur un lien, en changeant d'onglet... Tout, sauf fermer directement la page 
(et encore, une seule ligne de script en plus gererait ce cas si nous le jugions perti- 
nent). 

3 Lorsqu'on revient sur la page, le champ a une valeur a jour. 

Pour realiser cela, trois conditions doivent etre satisfaites : 

• Le serveur doit conserver une information associee au cote client. On va passer par 
des cookies pour identifier le client et maintenir un tableau associatif cote serveur. 

• Le contenu du champ doit etre genere dynamiquement. On pourrait se contenter 
de demander a la couche serveur sa valeur une fois la page chargee, mais cela 
entrainerait une latence entre l'affichage de la page et la mise a jour de la valeur du 
champ, qui serait potentiellement desagreable. II faut done que la page entiere 
soit generee. 

• Le navigateur doit reagir lorsque le champ de saisie perd le focus (cesse d'etre la 
cible de la saisie clavier) en synchronisant la valeur sur le serveur ; si cette syn- 
chronisation echoue, il doit le signaler a l'utilisateur. 

Afin de generer du contenu cote client, nous allons stocker le modele de la page dans 
un fichier HTML, et utiliser une syntaxe speciale pour y placer des portions dynami- 
ques. On utilisera la bibliotheque ERb, fournie avec Ruby, dont la syntaxe ressemble 
beaucoup a ASP ou JSP. 

Commencez par arreter, si ce n'est deja fait, notre serveur de test precedent. Creez un 
nouveau repertoire de travail pour cet exemple, appelons-le sauvegarde_auto. Nous 
allons d'abord y deposer notre fichier modele, modele. rhtml (car . rhtml est 1' exten- 
sion conventionnelle des fichiers ERb). 
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Listing 5-8 Notre fichier de modele pour la page d'exemple 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

*• charset=iso-8859-15" /> 

<ti tl e>Sauvegarde automati que</ti tl e> 

<script type=" text/ javascript" src=" prototype. js"x/script> 

<script type="text/javascript" src="client . js"x/script> 
</head> 
<body> 

<hl>Sauvegarde automati que</hl> 

<p>La saisie ci-dessous doit persister toute seule, si vous avez 

JavaScript et 

les cookies actives. </p> 

<form> 

<pxinput type="text" id="edtName" value="<%= name %>" /></p> 

</form> 

</body> 
</html> 

La balise form n'est la que pour respecter la DTD de HTML. Notez l'attribut val ue 
du champ : <%= name %>. II s'agit d'une syntaxe ERb, que ce dernier remplacera 
dynamiquement a 1' execution. Avant d'attaquer le code du serveur, on remarque tou- 
tefois que notre fichier aura besoin de deux scripts pour dialoguer avec le serveur : 
Prototype bien sur, pour simplifier le script comme nous avons pris l'habitude de le 
faire, et un script dedie a notre exemple. 

Creons done un sous-repertoire docroot et placons-y prototype, js, plus un script 
client.js que nous pouvons deriver de hi_timed_client. js (pour recuperer la 
fonction getRequesterO). Nous ajusterons ce second script un peu plus tard. Void 
notre serveur, stocke dans un fichier serveur. rb, a la racine de notre repertoire de 
test, ou se trouve aussi modele. rhtml : 
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Listing 5-9 Notre serveur pour cet exemple 

#! /usr/bin/env ruby 

require 'erb' Q 

require 'webrick' 
include WEBrick 

DEFAULT_NAME = 'Saisissez votre nom ici' 

names = {} 

sessionCen = 

tempi ate_text = Fi le. read (' model e. rhtml ') 

page = ERB.new(template_text) 

server = HTTPServer. new (: Port => 8042) 

server .mount('/' , HTTPServlet : : FileHandler , './docroot') 

server .mount_proc('/page') do | request, responsel 
name = request. cookies. empty? ? DEFAULT_NAME : 
•» names [request . cooki es [0] . val ue . to_i ] 
response[' Content-Type'] = 'text/html' 
response. body = page. result(binding) 

end 

server .mount_proc('/save_name') do | request, responsel 
response[' Content-Type'] = 'text/plain' 
if == rand(4) 

response. body = '501 Could not be saved.' 

next 
end 
if request .cookies. empty? 

sessionGen += 1 

session_id = sessionGen 

cookie = Cookie. new('session_id' , session_id.to_s) 

cookie. expires = Time.utc(2010, 12, 31) 

response. cookies « cookie 
else 

sessi on_i d = request . cooki es [0] . val ue . to_i 
end 

names[session_id] = request. query ['name'] 
response. body = '200 Saved.' 
end 

trap('INT') { server. shutdown } 

srand 
server .start 
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Nous avons besoin du module ERb pour interpreter la syntaxe de notre modele 
HTML. 

Conteneur associant cles de sessions et noms sauvegardes, et generateur de cles. 
Chargement du texte du modele depuis le fichier, et construction du moteur pour 
l'interpreter. L'extension . rhtml est juste une convention... 

O II faut fournir la variable name, qui contient soit la valeur par defaut, soit celle 
associee a la session. L'appel a result construit la page, binding represente la 
portee courante, dans laquelle ERb va chercher la variable name. 

Simulation d'un echec environ une fois sur quatre. 

Si c'est la premiere sauvegarde (pas de cookie existant), on cree une cle de session 
qu'on envoie dans un cookie valable jusqu'au 31/12/2010 (9a nous donne le temps 
de tester...). Ensuite on met a jour 1'information transmise dans le conteneur de 
noms, cote serveur. 

Cet exemple ne tiendrait pas une forte charge, dans la mesure ou le generateur de 
cles de sessions nest pas protege contre des acces concurrents. Mais pour notre 
exemple, qu'importe ! 

Plus important : le choix du stockage de nom cote serveur, plutot que d'utiliser 
directement le cookie. C'est une bonne habitude a prendre, principalement pour 
deux raisons : 

1 Un cookie n'a qu'une capacite limitee de stockage, pour des raisons de performan- 
ces essentiellement. II est acceptable d'y stocker un numero (comme ici) ou un 
texte de faible longueur (cles de session plus communes en ASP, PHP, JSP, 
Rails...). En revanche, stocker des contenus plus lourds va poser probleme. Pour 
eviter deux poids deux mesures, on stocke done nos donnees cote serveur. 

2 Un cookie est stocke en clair sur le poste client, ce qui peut constituer un souci si 
on venait a y stocker des donnees sensibles voire confidentielles. Certaines attaques 
XSS {Cross-Site Scripting, ou un script est injecte sur un site pour transmettre ses 
cookies a un tiers) permettent a d'autres sites que le notre de recuperer des cookies 
qui ne leur appartiennent pas. Evitons done d'y stocker des donnees « utiles ». 

A present que nous avons notre couche serveur au grand complet, nous pouvons la 
tester manuellement, pour ensuite passer a l'ecriture du script qui synchronisera 
automatiquement cote serveur, en Ajax. 

Lancez votre serveur depuis une ligne de commande placee sur le repertoire, en 
tapant simplement ruby serveur . rb. 

Dans votre navigateur, allez sur FURL http://localhost:8042/page. 
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Figure 5-5 

Votre page au premier acces : 
le texte par defaut 
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Nous n'avons pas encore ecrit le script qui va synchroniser notre saisie, alors realisons 

une invocation a la main, en naviguant a present sur FURL suivante : 

http://localhost:8042/save_name?name=Christophe. 

Vous devriez obtenir un message de code 200 ou 501. Vous pouvez rafraichir la page 

plusieurs fois pour voir s'afficher l'un ou l'autre, suivant le resultat du « lancer de de » 

cote serveur. Une fois que vous avez obtenu au moins un code 200, revenez sur votre 

page principale (http://localhost:8042/page) et, si necessaire, rafraichissez-la. 



Figure 5-6 

L'affichage initial prenant en 
compte notre sauvegarde 



1 Sauvegarde automatique - Mozilla Firefox 


_ Q X 


Rchier Edison Affichagc 


A*er a Marque pages Outits Aide 






0-L>-[§ 'J @tP~ 


http //Ice a ■lost 8042/page 


J,. 


XDISaWe- JilCOOMtS- IjCSS- 2 Forms- £ Images- ©Information- H Mtecdancous- ^Outline- GJResize- 2 


Sauvegarde 

La saisie ci dessous doit 


automatique 

aorsistortouto scuic-. si vous avoz 


JavaScript et les cookies: actives . 


|chrisiop|-ve 


Termini 




r 



Vous pouvez examiner la valeur de vos cookies pour l'hote 1 oca! host, afin de voir ce 
que le serveur vous a renvoye lors de la sauvegarde initiale. Le mode d'emploi varie 
d'un navigateur a l'autre. Sur Firefox avec l'extension Web Developer, il suffit de 
cliquer Cookies > View cookie information dans la barre associee. 

On voit bien notre cookie session_id, de valeur 1. L'information a proprement 
parler (le nom sauvegarde) n'existe pas dans le cookie : seul le serveur en dispose. 

II nous reste a ecrire le script ! On va conserver la fonction getRequester de notre 
script de premiere demonstration, mais au lieu de ses fonctions askTime, 
bindButtons et greet, nous allons ecrire le code suivant, et ajuster l'appel a 
Event. observe en fin de script. 
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Figure 5-7 

['information stockee dans un 
cookie sur notre navigateur 
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Listing 5.10 Notre script dedie, clientjs 

function bindTextField(e) { Q 

Event .observe C$C'edtName') , "blur", syncName, false); 

} // bindTextField 

function getRequesterO { 

} // getRequester 

function syncName (e) { 

var requester = getRequesterO ; 
requester. onreadystatechange = functionO { 
if (4 == requester. readyState 

&& (200 != requester. status © 

|| null == requester .responseText. match C/A200/))) 
alert('Le nouveau nom n\' pas pu etre sauvegarde !'); 

}; 

var qs = $H({ 'name': $F('edtName') }) .toQueryStringO ; 

requester. open("CET" , M /save_name?' + qs) , true); 
requester. send (null) ; 
} // syncName 

Event. observe(window, "load", bindTextField, false); 
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O On associe notre fonction a l'evenement blur du champ, c'est-a-dire la perte de 
focus. Toute saisie suivie d'une perte de curseur (clic en dehors de la zone de sai- 
sie, notamment suivi de lien, changement d'onglet, ouverture de menu, etc.) lan- 
cera la sauvegarde. En l'associant a l'evenement unload de window, on pourrait 
aussi sauver sur fermeture directe. 

Un probleme peut venir de HTTP (on teste done status), mais aussi se situer a 
l'interieur de notre couche serveur. En examinant le debut du texte renvoye, on 
detecte un code a probleme. 

Notez l'astuce qui consiste a utiliser un Hash (fourni par Prototype) pour construire 
correctement la query string encodee de notre URL... 

Et voila, 9a marche ! Essayez : rafraichissez la page, modifiez le nom et cliquez 
himporte ou ailleurs (ou simplement changez d'onglet, allez sur une autre applica- 
tion, revenez...) et rafraichissez : votre nouvelle valeur est bien la. Si vous avez ins- 
talle Firebug, vous pouvez ouvrir son panneau pour suivre les requetes de la page. 



Figure 5-8 

Modifications et dies en dehors 
de la zone de saisie, suivis par 
Firebug 
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Precisons pour finir que, dans le cadre d'une veritable application, on utilisera 
normalement la methode POST pour des actions modificatives comme celle-ci. 
Mais cela nous aurait contraint a complexifier un peu notre code de demonstration 
afin de gerer l'invocation manuelle dans la barre d'adresses et l'invocation Ajax. 
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J'ai prefere rester simple pour cet exemple. Pour rappel, l'invocation POST aurait 
ressemble a ceci cote client : 

requester .open("POST" , "/save_name" , true); 
requester. send(qs) ; 

Exemple 2 : barre de progression d'un traitement serveur 

Autorisons-nous a present un exemple un peu plus « sexy », melant Ajax et CSS pour 
obtenir quelque chose de plus joli qu'une simple sauvegarde automatique (laquelle, il 
faut bien l'avouer, recele un potentiel esthetique plutot leger). Nous allons realiser une 
barre de progression dans une page web, qui va se mettre a jour toute seule pour suivre 
l'avancee d'un traitement sur le serveur. Sans Ajax, ce type de fonctionnalite exige des 
cadres, voire des i frames. Rien de tout cela pour nous : une seule page, sans cadre. 

Bien entendu, nul besoin d'effectuer un veritable traitement cote serveur. Au risque 
de passer pour des faineants, nous allons nous contenter de simuler un traitement : 
chaque fois qu'on nous demandera de signaler notre progression, nous nous conten- 
terons d'augmenter un pourcentage, sans rien faire pour autant. Une fois en bout de 
course, on repart a zero, histoire de pouvoir rafraichir la page pour refaire la demons- 
tration. En somme, on prototype, on maquette, mais on ne fait pas vraiment le 
boulot (c'est deja mieux que de n' avoir qu'un Powerpoint a montrer). 

Creez un nouveau repertoire de travail, avec comme d'habitude un sous-repertoire 
docroot contenant prototype. js. Vous pouvez aussi y recopier notre client. js 
recent, afin de recuperer getRequester. 

Voici notre script serveur . rb, regardez comme il est petit ! 
Listing 5-11 Notre serveur simulant une progression de tache 

#! /usr/bin/env ruby 

require 'webrick' 
include WEBrick 

progress = 

server = HTTPServer. new (: Port => 8042) 

server . mount ('/' . HTTPServlet: :FileHandler , './docroot') 
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server .mount_proc('/whatsup') do | request, responsel 

response ['Content-Type'] = 'text/plain' 

progress += rand(5) + 1 

progress = 100 if progress > 100 

response. body = progress. to_s 

# Boucler pour la prochaine sequence d'appel ;-) 

progress = if 100 == progress 
end 

trap('INT') { server . shutdown } 

srand 
server .start 

Rien de bien extraordinaire, comme vous pouvez le voir. On fait grimper le pourcen- 
tage de progression a chaque appel, d'un pas entre 1 et 5. Si on depasse 100, on 
rabote la valeur. Et une fois arrive au bout, on repart a zero pour la demonstration 
suivante (voila un code bien loin d'une implementation reelle...). 

Cote client, il va nous falloir une page web toute simple, sans partie dynamique, con- 
tenant notre barre de progression. Nous allons realiser celle-ci entierement en CSS, 
et histoire de sacrifier aux traditions (certes toutes fraiches), nous allons y coller 
l'incontournable spinner, cette petite animation omnipresente sur les sites Web 2.0, 
qui indique qu'on attend apres Ajax. Notez que si vous optez ici pour la version la 
plus classique, vous etes libre d'utiliser l'animation que vous voulez. Sans doute trou- 
verez-vous votre bonheur sur cette petite collection en ligne : 
http://www.napyfab.com/ajax-indicators/. 

Void done notre page. Comme elle est servie statiquement par notre serveur, nous 
allons simplifier FURL en la nommant i ndex. html, dans docroot. 

Listing 5-12 La page web client et sa barre de progression CSS 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 
*» xml :lang="f r-FR"> 

<head> 

<meta http-equiv="Content-Type" content="text/html ; 

*• charset=iso-8859-15" /> 

<title>Barre de progression</title> 

<link rel="stylesheet" type="text/css" href="client.css"x/script> 

<script type=" text/ javascript" src=" prototype. js"x/script> 

<script type=" text/ javascript" src=" client. js"x/script> 

</head> 
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<body> 

<hl>Barre de progression</hl> 

<p>Suivez le deroulement du processus cote serveur avec la barre ci- 
dessous.</p> 

<div class="progressBar" id="progress"> 
<span class="pbFrame"> 

<span cl ass="pbCol or Fi 1 1 "></span> 
<span cl ass="pbPercentage">0%</span> 
</span> 

<span class="pbStatus"x/span> 
</div> 

</body> 
</html> 

Nous partons du principe qu'une barre de progression est representee par : 

1 Un di v jouant le role de conteneur pour la barre et son animation/image de droite 
{spinner ou icone de completion). 

2 Dans ce div, un premier span qui represente la barre a proprement parler, et un 
second qui fournira 1' animation ou image. 

3 Dans le span de la barre, un span gerant la barre coloree qui va progresser en 
largeur, et un autre fournissant la representation textuelle de la progression. En 
termes d'accessibilite, il est en effet bon d'avoir une representation textuelle faci- 
lement ostensible dans le flux du document. 

Cette facon de faire nest pas forcement la meilleure, mais elle permet de definir de 
multiples barres dans une meme page, en fournissant simplement un id distinct pour 
chaque div, et en respectant juste les classes CSS indiquees a l'interieur. 

Listing 5-13 La feuille de styles pour ces barres de progression 

div. progressBar { 

font-family: sans-serif; 

position: relative; 

margin: lem 0; width: 204px; height: 20px; 
} 

span.pbFrame { 

position: absolute; 

left: 0; top: 0; width: 180px; height: 16px; 

border: 2px solid #444; 

background-color: silver; 
} 
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span .pbColorFill { 

position: absolute; 

left: 0; top: 0; height: 100%; width: 0; 

z-index: 1; 

background-color: green; 
} 

span .pbPercentage { 

position: absolute; 

left: 0; top: 0; height: 100%; width: 100%; 

z-index: 2; 

font-size: lem; 

line-height: 16px; 

font-weight: bold; 

text-align: center; 
} 

span .pbPercentage. over50 { 

color: white; 
} 

span .pbStatus { 

position: absolute; 

background-repeat: no-repeat; 

top: 2px; width: 16px; height: 100%; 

z-index: 2; 
} 

span .pbStatus. working { 

background- image: url (spinner.gif) ; 
} 

span .pbStatus. done { 

background-image: url(ok.png); 
} 

Si certains aspects vous echappent, allez faire un tour a l'annexe B. Elle vous rappel- 
lera entre autres les concepts qui sous-tendent le positionnement et le modele de 
boites, eclairant l'utilisation faite ici de position et z-i ndex. 

Notez l'emploi des classes multiples qui aide a bien separer le comportement (chan- 
gement d'etat dans le temps) de l'aspect (images et couleurs differentes). En effet, 
dans le script ci-apres, on ne touche pas directement au style, on se contente de 
manipuler les classes assignees aux elements. 

Enfin, il reste notre script client. 
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Listing 5-14 Le script client, qui des le chargement interroge 10 fois par seconde 

function getRequesterO { 

} // getRequester 
INTERVAL =100; Q 

var gProgressTimer = 0; 

function checkProgress(id) { 
var node = $(id) ; 

var filler = node.getElementsByClassNameC'pbColorFill ') .first() ; Q 
var percent = node.getElementsByClassName('pbPercentage') .first() ; 
var status = node.getElementsByClassName('pbStatus') .first() ; 
var firstHit = == gProgressTimer; 
if (IfirstHit) { 

window. clearTimeout(gProgressTimer) ; 
gProgressTimer = 0; 
} else { 

Element . removed assName(percent , 'over50') ; 
Element .removed assName (status, 'done') ; 
Element .addClassName (status, 'working') ; 
} 

var requester = getRequesterO ; 
requester. onreadystatechange = functionO { 

if (4 == requester. readyState && 200 == requester. status) { 
var progress = parselnt(requester .responseText , 10); 
if (100 <= progress) 

progress = 100; 
filler .style. width = progress + '%' ; 
percent. firstChild.nodeValue = progress + '%' ; 
// Blanc sur vert, c'est plus joli... :-) 
if (progress > 50 && 

! Element. hasd ass Name (per cent, 'over50')) 
Element .addClassName(percent, 'over50') ; 
if (100 == progress) { 

Element .removed assName (status, 'working') ; 
Element .addClassName (status, 'done') ; 
} else 

gProgressTimer = window. setTimeout( 

* 'checkProgressC" + id + '")', INTERVAL); 
} 

}; 

requester. open('CET' , '/whatsup' , true); 
requester. send (null) ; 
} // checkProgress 

Event. observe(window, 'load', 

•» functionO { checkProgressC progress') }, false); 
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O Intervalle entre requetes de progression : 100 ms. 

Obtention des noeuds du DOM qui nous interessent d'apres leur classe, a l'inte- 

rieurduch'v identifie par id. 
Distinction entre le premier appel (juste apres le chargement de la page) et les 

suivants, histoire de pouvoir reutiliser la barre sans recharger la page, qui sait ? 
O On se protege contre « 08 », « 09 », etc. et... contre un serveur mal fichu ! 
En definissant une largeur en %, on s'adapte automatiquement a la taille du span 

conteneur. 

Si on a fini, exit le spinner, voici le sceau de bonne fin ! Sinon, n'oublions pas de 
redemander une requete pour bientot. 



Fichiers d'exemple Les images 

Sur cet exemple, des fichiers vous manquent : les images spinner.gif et ok.png. Vous pouvez 
vous les procurer dans I'archive contenant tout le code de cet ouvrage, disponible en ligne sur le site des 
editions Eyrolles. 



II ne vous reste plus qua lancer votre serveur (avez-vous pense a arreter le 
precedent ?), et a naviguer sur http://localhost:8042/. Et la, joie ! 



Figure 5-9 

Quelques etapes de la 
progression, jusqu'a la fin 



' Barre de progression - Mozilla Firefox 
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Barre de progression 

Suivez le deroulement du processus cote serveur avec la barre 
ci-dessous. 



13% 




Voila qui a tout de meme une autre allure qu'un simple champ de formulaire ! 
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Fragments de page prets a l'emploi : reponse XHTML 

Un mecanisme tres frequemment rencontre consiste a produire un fragment 
XHTML cote serveur, et le renvoyer au client. Ce dernier va « incruster » le frag- 
ment a l'endroit approprie. 

Bien sur, cela implique une legere intrusion de la couche presentation dans la couche 
metier, mais avec les bonnes methodologies, ce nest pas tres grave. Apres tout, la 
couche presentation est generee cote serveur pour des pages dynamiques. II suffit de 
ne pas mettre de XHTML en dur dans le code pour rester plutot propre, et juste- 
ment, nous avons deja vu ERb pour realiser cela dans notre exemple ! 

Creez un nouveau repertoire, et comme d'habitude, copiez-y docroot, prototype, js 
et client, js, que vous reduirez a son getRequester. Nous allons aussi repartir de 
notre index, html precedent pour le squelette de la page principale. 

Notre exemple sera un formulaire de commentaire, par exemple dans le cadre d'un 
blog. Le commentaire sera envoye en Ajax, et cette fois-ci, nous ferons l'effort cote 
serveur permettant un envoi en POST, ce qui est tout de meme plus conforme aux 
regies du W3C pour les actions censees modifier la couche serveur. 

Le serveur generera le bloc XHTML de representation du commentaire (pretendu- 
ment sauve), et le renverra pour insertion. Nous utiliserons Prototype pour realiser 
l'insertion en question. 

Void d'abord notre code serveur. 

Listing 5.15 Notre script serveur, capable de traiter le POST comme le GET 

#! /usr/bin/env ruby 

requi re ' cgi ' 
require 'erb' 
require 'webrick' 
include WEBrick 

tempi ate_text = File. read ('commentaire. rhtml ') 

comment = ERB.new(template_text) 

server = HTTPServer. new (: Port => 8042) 

server .mount('/' , HTTPServlet: : FileHandler , './docroot') 
server .mount_proc('/add_comment ') do | request, response | 
post = 'POST' == request. meta_vars['REQUEST_METHOD'] Q 
params = post ? CGI: :parse(request . body) : request .query 
params.each { |k, v| params [k] = v[0] } if post 
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# PASSEZ les parametres, sous peine d'erreur de nil 
name = CCI : :escapeHTML(params ['name']) 

email = CGI: :escapeHTML(params ['email ']) 

# Formatage simple : les textes separes par des lignes vierges 

# sont des paragraphes et on supprime les paragraphes vides. 
text = CCI : :escapeHTML(params[ 'comment ']) 

text . gsub ! (/(\r?\n) {2 , }/ , "</p>\n<p>") 
text = ('<p>' + text + '</p>') .gsub(/<p>\s*<\/p>/, ' ') 
response ['Content-Type'] = 'text/html' 
response. body = comment . result(binding) 
end 

trap('INT') { server. shutdown } 

server .start 

Les 3 lignes de code en Q permettent de gerer tant le POST que le GET. Dans la 
mesure ou vous n'utiliserez normalement jamais WEBrick directement en produc- 
tion (preferez, largement, Ruby on Rails !), on n'entrera pas dans les details. Les 
habitues des scripts cote serveur de type CGI s'y retrouveront... 

Le modele de commentaire est tres simple. 

Listing 5-16 Le modele de commentaire 

<div class="comment"> 

<h3xa href="mailto:<%= email %>"><%= name %></a> 
@ <%= Time. now. strftime('%H:%M') %></h3> 
<div class="commentText"> 

<%= text %> 
</div> 
</div> 

Voici a present notre page HTML cliente. 

Listing 5-17 La page cliente, avec un formulaire plutot semantique 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

* charset=iso-8859-15" /> 
<ti tl e>Commentai res</ti tl e> 
<link rel="stylesheet" type="text/css" href="client .css"x/script> 
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<script type=" text/ javascript" src=" prototype. js"x/script> 
<script type=" text/ javascript" src=" client. js"x/script> 

</head> 

<body> 

<hl>Commentai res</hl> 

<p>Ajoutez un commentaire ci-dessous. En le soumettant, il sera envoye en 
arriere-plan au serveur, et sa representation XHTML sera renvoyee puis 
inseree dynamiquement dans cette page.</p> 

<form id="commentForm" method="post" action="/add_comment"> 
<fieldset> 

<legend>Un commentai re ?</legend> 

<P> 

<label for="edtName" accesskey="N">Nom</label> 

<input type="text" id="edtName" name="name" tabindex="l" /> 

</p> 

<P> 

<label for="edtEmail " accesskey="C">Courriel</label> 

<input type="text" id="edtEmail" name="email" tabindex="2" /> 

</p> 

<p class="comment"> 

<label for="memComment" accesskey="0">Commentai re</label> 
<textarea id="memComment" name="comment" cols="40" 

rows="5" tabindex="3">Votre commentaire ici</textarea> 

</p> 

<P> 

<input type="submit" value="Envoyer !" tabindex="4" /> 

</p> 
</fieldset> 
</form> 

<div id="comments"x/div> 

</body> 
</html> 

Notez que dans une application professionnelle, on fournirait des mecanismes per- 
mettant de traiter le formulaire normalement cote serveur, plutot qu'en Ajax unique- 
ment, a des fins d'accessibilite et de compatibilite maximales : c'est la raison pour 
laquelle notre formulaire est correctement parametre. 

Le di v final servira de conteneur pour les insertions dynamiques des blocs XHTML 
des commentaires. 



Ajax, ou I'art de chuchoter 

Deuxieme partie 



A present, voici le script client. 

Listing 5-18 Le script client, qui construit la requete POST et insere le resultat 

function bindFormO { 

Event .observe ( ' commentForm ' , 'submit', swi tchToAJAX) ; 
} // bindForm 

function getRequester() { 

} // getRequester 

function switchToAJAX(e) { 
Event .stop(e) ; 

var requester = getRequesterO ; 
requester. onreadystatechange = functionO { 

if (4 == requester. readyState && 200 == requester. status) { 

new Insertion. BottomC comments ' , requester . responseText) ; Q 
} 

}; 

requester. open('POST' , ' /add_comment ' , true); 
var data = $H({ © 

'name': $F('edtName') , 

'email' : $F('edtEmail '), 

'comment': $F('memComment') 
}) .toQueryStringC) ; 
requester. send(data) ; 
} // switchToAJAX 

Event. observe(window, 'load', bindForm); 

L'appel Prototype en Q ajoute le fragment XHTML fourni dans la reponse dans 
1' element comments, apres son contenu existant. Par ailleurs, en POST, les parametres 
sont par defaut encodes comme dans une URL, mais sont dans le corps de la requete. 
Passer par un Hash comme en © est decidement bien pratique... 

Pour que ce soitjoli, reste une petite CSS (il ne s'agit veritablement que d'esthetique, 
le script laissant les styles tranquilles). 
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Listing 5-19 La feuille de styles employee 

form#commentForm fieldset { 

background: #ccc; 

width: 60ex; 

border: lpx solid #444; 
} 

form#commentForm p { 

position: relative; 

height: 2.2em; 
} 

form#commentForm input#edtName, form#commentForm input#edtEmail , 
form#commentForm textarea#memComment { 

font-family: serif; 

position: absolute; 

left: 14ex; right: 0; top: 0; bottom: 0.5em; 
} 

form#commentForm p. comment { 

height: 6.2em; 
} 

div. comment { 

font-family: sans-serif; 

width: 60ex; padding: lex; margin: lem 0; 

border: lpx solid #990; 

background: #ffc; 
} 

div. comment h3 { 

font-size: 100%; 
} 

div. comment h3 a { 
color: maroon; 
} 

div. comment div.commentText { 

border-left: 0.5ex solid gray; 

margin-left: lex; padding-left: lex; 

font-style: italic; 
} 
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Et voici un exemple apres avoir saisi trois series de valeurs et presse le bouton d'envoi 
a chaque fois ; la page ne s'est jamais rechargee ! 



Figure 5-10 

La page apres trois 
saisies envoyees 
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Commentaires 



Ajoutez un com mental re ci-dessous. En le soumettant il sera envoys en 
arriere-plan au serveur, et sa representation XHTML sera renvoj^e puis ins6nee 
dynamiquement dans cette page. 



-Un commentaire .•■ 


Nom 


Chris tophc 






Courricl 


tclcl® exam p 1 e .com 






Commentaire 


Exomplo d'cncodagc du HTML : <hcllo> 
< > & ' " Rien ne passe ! 






jhnvoyer ! j | 









Christophe & 13:50 
| tssai avec deux lignesse sun/ant dons le champ commentaire 



Chrlstophe @ 13:50 

IEssal avec une ttqne, une llgne vlerqe 
er une /lane finale dans le champ commentaire. 



Christophe @ 13:51 

| Exemple d'ertcodage du HTML : <hello:? <::>&'" Rien tie passe / 



Termine 



Un apercu des coulisses de I'insertion... 

Techniquement, Prototype a recours a plusieurs methodes pour assurer une insertion 
multinavigateur. II peut utiliser le insertAdjacentHTML specifique aMSIE, lapropriete 
i nnerHTML, originellement pure MSIE mais aujourd'hui presente dans plusieurs naviga- 
teurs (dont Mozilla/Firefox et Opera), ou analyser le fragment pour realiser une inser- 
tion 100 % DOM. C'est un algorithme de travail fastidieux, et on remercie Prototype de 
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nous eviter son ecriture ! D'autant que sur MSIE, i nnerHTML ne fonctionne pas lorsque 
le fragment qu'on lui donne comporte des balises de formulaire (mais des balises de 
script, aucun probleme ! Toujours logiques, nos amis de Redmond...). 

Notez au passage que, lorsqu'elle est disponible, i nnerHTML est bien plus rapide a uti- 
liser qu'une construction DOM brute (de 3 a 30 fois plus rapide, suivant le 
navigateur !). En revanche, hormis dans Firefox 1.5, elle ne fonctionne pas dans une 
page servie avec un type MIME XHTML (applicati on/xhtml +xml), types qu' exi- 
gent normalement les pages XHTML 1.1 et ulterieures. C'est une des no mb reuses 
raisons qui jouent contre la migration massive vers ce type MIME, pourtant seman- 
tiquement plus adapte que text/html . 

Pour finir avec XHTML, sachez que la notion globale de communication asyn- 
chrone HTTP renvoyant un fragment de page est si repandue qu'un microformat lui 
est dedie : AHAH. Les microformats visent a fournir une ou plusieurs fonctionna- 
lites en se basant sur des formats et standards existants, utilises de facon innovante et 
formalisee. Vous en saurez plus en consultant le site dedie aux microformats : 
http://www.microformats.org/about/, et la page specifique au microformat AHAH : 
http://www.microformats.org/wiki/rest/ahah. 

Dans la cour des grands : XPath pour traiter 
des donnees XML complexes 

Tout cela est bel et bon mais on peut se demander pourquoi on ne renvoie pas de 
XML. Dans Ajax, le X represente XML, et renvoyer une grappe XML peut impres- 
sionner. Apres tout, tout est a base de XML aujourd'hui : enlevez XML et J2EE 
n'existe plus, tout comme SOAP et OpenDocument. 

Certes. Mais le plus grand danger de XML resulte justement de son immense 
popularite : on veut en mettre partout. C'est un peu comme Ajax aujourd'hui. Et 
bien que la pulsion du « tout XML » soit en baisse (heureusement, depuis 1998, les 
passions se sont calmees), on en trouvera toujours pour miser dessus sans rime ni 
raison. Le XML n'est pourtant pas incontournable : divers frameworks fonctionnent 
tres bien sans lui. 

Ceci dit, je n'ecrirais pas une section ainsi nommee si je voulais envoyer XML aux 
orties ; il existe certains cas de figure ou XML est approprie. II s'agit principalement 
de cas ou les donnees a recuperer sont particulierement riches, ou presentent cer- 
taines caracteristiques de complexite (par exemple, un nombre inconnu d'elements, 
ou des elements aux noms inconnus a l'avance). Meme s'il reste possible de traiter de 
tels cas autrement, avec JSON par exemple, XML va briller si on doit « fouiller » 
dans les donnees de facon un tant soit peu puissante. 
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En effet, des lors qu'on dispose d'une grappe XML, on peut utiliser des technologies 
comme XPath ou encore XSLT pour realiser des recherches complexes ou des trans- 
formations puissantes sur cette grappe. Pour de tels traitements, JSON ne peut tout 
simplement pas concurrencer XML. 

Cette perspective est tout a fait allechante, mais il convient de mettre un bemol, 
comme souvent dans l'univers des technologies web cote client : celui de la compati- 
bilite des navigateurs. 

Le W3C a defini les specifications XSLT et XPath ainsi que leurs cousines liees au 
DOM (par exemple DOM niveau 3 XPath), qui definissent des interfaces telles que 
XSLTProcessor. Ces interfaces sont censees, a terme, etre proposees par des objets 
accessibles en JavaScript, par exemple document. Cependant, le support des ces stan- 
dards varie grandement d'un navigateur a l'autre. 

Dans les exemples qui vont suivre, nous allons nous concentrer sur XPath, pour voir 
comment extraire quelques informations d'une grappe XML sans la parcourir 
manuellement via les possibilites classiques du DOM (mais si, vous savez bien : 
fi rstChild, nextSibling, nodeType, nodeValue, et les autres...). II nous faut done 
un navigateur prenant en charge XPath (presque tous, en interne), mais aussi et sur- 
tout le DOM niveau 3 XPath. 

C'est la que les choses se gatent : si Firefox (et done Camino) et Opera (a partir de la 
version 9) repondent presents, on tombe actuellement a plat sur MSIE, Safari et 
Konqueror. II est certes permis d'esperer du changement cote Safari et Konqueror 
(qui se talonnent toujours de pres, n'etant pas sans rapport), mais on sait que cote 
MSIE, il faudra attendre au grand minimum la version 8, puisque la 7, encore une 
fois, ne prevoit aucune amelioration significative sur JavaScript ou le DOM. 

Utiliser une technologie indisponible sur MSIE peut en refroidir plus d'un, en parti- 
culier pour un service Extranet ou Internet. Mais rassurez-vous : des palliatifs exis- 
tent, sous forme de bibliotheques JavaScript simulant la fonctionnalite. Nous verrons 
done d'abord un exemple avec du code « natif » (support DOM niveau 3 XPath), qu'il 
vous faudra necessairement tester sur Firefox, Camino ou Opera 9. Par la suite, nous 
adapterons sa couche client pour realiser l'equivalent au moyen d'une bibliotheque 
tierce partie, en l'occurrence GoogleAJAXSLT (voila un nom qui noue la langue). 

Vite et bien : utilisation de DOM niveau 3 XPath 

Nous allons implementer une petite fonction toute bete : une liste de flux Atom pour 
quelques blogs reconnus, dont nous irons chercher dynamiquement le nombre d'arti- 
cles. Theoriquement, cela pourrait se passer integralement cote client, mais cela 
implique une configuration de securite particuliere, qui varie sensiblement d'un navi- 
gateur a l'autre. 
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Pour kisser ces problemes de cote pour l'instant (nous aurons tout le temps de les 
examiner aux chapitres 8 et 9), nous allons implementer la recuperation des contenus 
en passant par notre couche serveur, qui jouera le role de l'intermediaire. 

Creez un nouveau repertoire et son sous-repertoire doc root, copiez-y prototype, js 
et client, js, dont on recuperera le getRequester, ainsi que le index.html pour 
son squelette. 

Void notre couche serveur, qui a en outre l'avantage de forcer un type de reponse 
text/xml , afin de garantir la construction d'un DOM cote client dans la propriete 
responseXML du requeteur : 

Listing 5-20 Notre serveur, simple « proxy » de chargement des flux 

#! /usr/bin/env ruby 

require 'net/http' 
require 'uri ' 

require 'webrick' 
include WEBrick 

FEEDS = { 

'Standblog' => 'http://standblog.org/dotclear/atom.php', 
'Formats Ouverts' => 'http://formats-ouverts.org/atom.php', 
'IEBlog' => 'http://blogs.msdn.com/ie/atom.xml' 

} 

server = HTTPServer. new (: Port => 8042) 

server .mount('/' , HTTPServlet: : FileHandler , './docroot') 

server .mount_proc('/get_feed') do | request, responsel 

# Critique pour pouvoir utiliser requester . responseXML ! 

response [' Content-Type ' ] = 'text/xml' 

feed = FEEDS [ request. query [' feed']] 

response. body = Net: : HTTP. get (URI. par se(feed)) 
end 

trap('INT') { server. shutdown } 

server .start 

Attention ! Si vous etes derriere un proxy, il vous faut ajuster ce code, en remplacant : 

Net: : HTTP. get 
par : 

Net: :HTTP. ProxyC votre_hote_proxy' , votre_port_proxy) .get 
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Rien de bien complique... Si le URI. parse vous intrigue, sachez simplement qu'une 
URL est un type particulier d'URI. 

Voyons a present notre page HTML, tres simple (pour simplifier le code de cet 
exemple, on n'a pas rendu la liste des flux dynamique). 

Listing 5-21 La page cliente, avec le formulaire de choix de flux 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd" 

<html xm"lns="http://www. w3.org/1999/xhtml" lang="fr-FR" xml :lang="fr- 

FR"> 

<head> 

<meta http-equiv="Content-Type" content="text/html ; 

»» charset=iso-8859-15" /> 
<title>Dernieres nouvelles (XML/XPath)</title> 

<link rel="stylesheet" type="text/css" href="client .css"x/script> 
<script type=" text/ javascript" src=" prototype. js"x/script> 
<script type=" text/ javascript" src=" client. js"x/script> 

</head> 

<body> 

<hl>Dernieres nouvelles (XML/XPath)</hl> 

<form id="feedForm"> 

<P> 

<label for="cbxFeed" accesskey="F">Flux Atom</label> 
<select id="cbxFeed"> 

<opti on>Standbl og</opti on> 
<option>Formats Ouverts</option> 
<option>IEBlog</option> 
</select> 

<input type="button" id="btnProcessFeed" 
value="Articles recents ?" 
accesskey="A" /> 
</p> 

<p id="status"> </p> 
</form> 

</body> 
</html> 
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II nous faut aussi un brin de CSS pour afficher le traitement en cours et son resultat. 
Listing 5-22 La petite feuille de styles 

p#status { 

height: 16px; 

font-family: sans-serif; 

color: gray; 

background-repeat: no-repeat; 
} 

p#status. working { 

background- image: url (spinner.gif) ; 
} 

Un flux Atom est un document XML avec un element racine feed contenant, entre 
autres, un element entry par article. II ne s'agit pas forcement de tous les articles du 
blog, juste des derniers : la taille peut etre configuree dans le logiciel de blog. 

Void notre code JavaScript. 

Listing 5-23 Le code client JavaScript, utilisant XPath 

function bindButtonO { 

Event. observe($('btnProcessFeed') , 'click', processFeed, false); 
} // bindButton 

function getRequesterO { 

} // getRequester 

function processFeedO { 

var feed = $F('cbxFeed') ; 

var form = $('feedForm') ; 

var status = $('status'); 

Form. disable (form) ; 

status.fi rstChi Id. nodeValue = ''; 

El ement.addClassName (status , 'working') ; 

var requester = getRequesterO ; 

requester. onreadystatechange = function() { 

if (4 == requester. readyState && 200 == requester. status) { 
var data = requester . responseXML; 
var articleCount = data. evaluated 

«• , count(//*[name()="entry"])' , data, null, 
*• XPathResult.NUMBER_TYPE, null) .numberValue; 
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Element. removed assName (status , 'working') ; 
Form. enable (form) ; 

status. fi rstChi Id. nodeValue = articleCount + ' article(s) . ' ; 
} 

}; 

var qs = $H({ 'feed': feed }) .toQueryStringO ; 
requester. open('CET' , '/get_feed?' + qs, true); 
requester. send (null) ; 
} // processFeed 

Event. observe(window, 'load', bindButton, false); 

Remarquez les petites precautions que nous prenons pour empecher le declenche- 
ment parallele de plusieurs requetes : nous desactivons le formulaire le temps du trai- 
tement et affichons bien sur le spinner pour patienter. 

Par ailleurs, il convient de faire la lumiere sur l'invocation quelque peu obscure de la 
methode eval uate : 

• II s'agit d'une methode DOM niveau 3 XPath, implementee par tout element qui 
implemente egalement l'interface DOM document. 

• Elle prend 5 parametres obligatoires : 

1. L' expression XPath. 

2. Le noeud servant de contexte a cette expression (souvent le document sur lequel 
on appelle eval uate, en particulier pour une expression demarrant par /). 

3. Un solveur eventuel d'espaces de noms (inutile ici, done null). 

4. Le type de resultat souhaite. Parmi les nombreux types, nous choisissons 
NUMBER_TYPE, declare dans la classe XPathResult, ce qui convient au resultat 
d'une fonction count. 

5. Un objet resultat existant qui sera alors recycle. Nous hen avons pas sous la 
main (ce serait different si nous bouclions autour d'evaluate, par exemple), 
aussi nous fournissons null. 

• Elle renvoie un objet XPathResult configure d'apres le 4 e argument. Dans le cas 
d'un resultat numerique, on exploite la propriete numberVal ue. 

Enfin, l'expression employee dans la fonction count signifie : « a tout niveau de pro- 
fondeur du document (//), les elements dont le nom est entry ». En XPath, on peut 
exprimer cela bien plus simplement, mais Firefox semble avoir un souci, tres surpre- 
nant d'ailleurs, avec « //entry »... 



Les mains dans le cambouis avec XMLHttpRequest 

Chapitre 5 

Et voila ! Une analyse qui nous aurait pris quelques lignes de JavaScript (beaucoup 
meme, si nous n'avions pas Prototype) est ici tres courte. Et encore, il ne s'agit que 
d'une analyse simple. On pourrait imaginer ne sortir que les articles dont le titre 
comporte un certain texte et mis a jour dans la semaine ecoulee, en augmentant a 
peine l'expression XPath... 

En simulant : utilisation de GoogleAJAXSLT 

On Fa vu, cette fonctionnalite n'est pour l'instant disponible, en natif, que sur 
Firefox, Camino et Opera 9 (et ulterieurs, evidemment). Ce qui laisse tout de meme 
de cote Safari, principal navigateur pour les utilisateurs de Mac OS X, Konqueror, 
tres prise des aficionados de KDE, et surtout MSIE, qui couvre tout de meme encore 
plus de 70 % du marche, monopole oblige. 

Pour disposer des memes fonctionnalites sur ces navigateurs, il faut pour l'instant 
avoir recours a des bibliotheques JavaScript tierces. Elles sont legion, mais l'une des 
plus prometteuses (et dont les performances sont raisonnables, meme sur les quelque 
21 Ko du flux Atom de 1'IEBlog !) est GoogleAJAXSLT (prononcez « Google AJAX 
S-L-T », ou a l'anglaise : « ... S-L-Tz »). 

Cette bibliotheque, ecrite par le googlien Steffen Meschkat, fournit un equivalent pas 
tout a fait complet, mais largement suffisant, des specifications XPath et XSLT, 
directement en JavaScript. Aucune dependance externe n'est requise (par exemple, la 
possibilite de recourir aux ActiveX sous MSIE, ou meme simplement presence de la 
bibliotheque Prototype), si ce n'est la prise en charge par le navigateur de l'essentiel 
de DOM niveau 2, ce qui nous assure un bon fonctionnement sur la quasi-totalite 
des navigateurs recents. 

La bibliotheque se trouve a l'adresse : http://code.google.eom/p/ajaxslt/, et est aussi 
presente dans 1' archive des codes source de ce livre. Assurez-vous d'utiliser au moins 
la version 0.5, sortie le 13 septembre 2006, et qui corrige quelques bogues severes, 
lesquels gacheraient nos exemples. II s'agit d'un projet libre, sous licence BSD. 
Deposez les fichiers de script mentionnes ci-dessous dans un sous-repertoire 
ajaxslt de votre docroot. 

Son utilisation differe finalement assez peu du code que nous avons ecrit pour 
l'exemple natif. Bien entendu, le serveur ne change pas, tout comme la page cliente 
(aux scripts pres, comme indique dans un instant) et la feuille de styles. II faut en 
revanche charger des scripts supplementaires, fournis par la bibliotheque. II est pre- 
ferable de les charger dans l'ordre suivant : util, xml token, dom et xpath. 
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L'en-tete de notre i ndex . html prend done la forme suivante. 
Listing 5-24 Nouvel en-tete pour notre page cliente 



<head> 

<meta http-equiv="Content-Type" conten 

* charset=iso-8859-15" /> 
<title>Dernieres nouvelles (XML/XPath 
<link rel="stylesheet" type="text/css" 
<script type="text/javascript" src="aj 
<script type="text/javascript" src="aj 
<script type="text/javascript" src="aj 
<script type="text/javascript" src="aj 
<script type="text/javascript" src="pr 
<script type="text/javascript" src="cl 

</head> 



t="text/html ; 

avec GoogleA;jAXSLT)</title> 

h ref ="cl i ent . css"x/scri pt> 
axsl t/mi sc . j s"x/scri pt> 
axsl t/xml token . j s"x/scr i pt> 
axslt/dom. js"x/script> 
axsl t/xpath . j s"x/scr i pt> 
ototype. js"x/script> 
ient. js"x/script> 



Ceci fait, il nous reste a ajuster le code client. Les modifications sont chirurgicales : 

1 Desactivez la journalisation du moteur (affichage dans un pave a position fixe des 
grandes etapes du traitementXPath), a l'aide d'une variable globale. 

2 Remplacez l'appel a document . eval uate par la construction d'un contexte pour le 
XML et un appel a xpathParse. 

3 Remplacez la propriete numbervalue par la methode numberValue(). 

C'est tout ! Voici l'extrait modifie du code client, avec les alterations mises en evi- 
dence (notez que la variable se termine par un double souligne). 

Listing 5-25 La portion modifiee de client.js 

if (4 == requester . readyState && 200 == requester. status) { 
var data = requester. responseXML; 

logging = false; 

var ctx = new ExprContext(data) ; 

var articleCount = xpathParse( 

**• ' count (//entry) ') .evaluate (ctx) . numberValue() ; 
Element. removed assName(status , 'working') ; 
Form. enable (form) ; 

status.fi rstChi Id. nodeValue = articleCount + ' article(s) . ' ; 
} 

Et voila, tout se passe comme avant, mais cette fois-ci cela fonctionne aussi sur 
MSIE, Safari, Konqueror... 
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Piloter la page en renvoyant du JavaScript 

Generer du JavaScript cote serveur ! Aurais-je perdu l'esprit ? Je vous imagine aise- 
ment froncer les sourcils d'un air reprobateur devant une telle meprise apparente des 
regies du jeu. 

Et pourtant, dans une application complexe, les comportements a adopter dans la 
page client au retour d'une requete Ajax peuvent etre non seulement complexes, mais 
aussi varier d'une requete a l'autre. Dans tel cas, il faudra aj outer un fragment 
XHTML, dans tel autre lancer un requeteur Ajax periodique, masquer le message de 
notification et modifier un texte, etc. 

Le fait est que traiter tous ces cas de figure dans le JavaScript de la fonction de rappel 
(ou dans des fonctions separees que cette derniere appellerait) conduit a un code 
JavaScript volumineux cote client. La factorisation est potentiellement difficile, dans 
la mesure ou on souhaite avoir des fichiers JS separes de nos pages afin de favoriser le 
travail des caches. Bref, c'est vite une galere ! 

En generant le JavaScript cote serveur (quelle que soit la technologie employee), on a 
beaucoup plus de flexibilite : on peut renvoyer le bout de script exactement adapte a 
la situation. Ce script peut etre autonome (a Prototype pres, le plus souvent), ou 
reposer sur des variables et fonctions dont il connait la disponibilite cote client. 

La generation du morceau de script peut varier en difficulte : ainsi, dans l'exemple 
ci-apres, nous allons le generer a la main, ce qui nest ni tres elegant ni tres facile. 
Dans certains frameworks, cette fonction est deja la. Ruby on Rails, notamment, 
a introduit cette annee les templates RJS, qui permettent d'ecrire en quelques lignes 
de Ruby un modele de reponse Ajax qui sera traduit a la volee en JavaScript portable 
base sur Prototype ! Bonheur ! 

Pour cet exemple, nous allons reprendre notre barre de progression et l'adapter pour 
faire en sorte que le code cote client n'ait plus de logique algorithmique pour le trai- 
tement du pourcentage : c'est le serveur qui determinera le code a executer suite a 
l'envoi de la requete Ajax. Le cote client se contentera de mettre a disposition les 
objets necessaires (composants de la barre de progression concernee), et d'evaluer le 
code JavaScript renvoye par le serveur. 

Recopiez completement votre repertoire de travail pour l'exemple de la barre de pro- 
gression. Nous n allons en changer que deux fichiers : le serveur et le script. 
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Commencons par le script : il s'agit simplement de remplacer, dans le traitement du 
retour de requete Ajax, l'ancien code suivant : 

var progress = parselnt(requester . responseText, 10); 
if (100 <= progress) 

progress = 100; 
filler .style. width = progress + '%' ; 
percent.fi rstChi Id. nodeValue = progress + '%' ; 
// Blanc sur vert, c'est plus joli... :-) 
if (progress > 50 && ! Element. hasClassName (percent , 'over50')) 

Element.addClassName(percent, 'over50') ; 
if (100 == progress) { 

Element. removed assName(status , 'working') ; 

Element.addClassName(status , 'done') ; 
} else 

gProgressTimer = window. setTimeout( 

*■ 'checkProgressC" + id + '") ' , INTERVAL); 

par celui-ci : 

I eval (requester. responseText) ; 

C'est tout ! La delegation, ca a du bon, vous ne trouvez pas ? 

Passons maintenant cote serveur, ou le code est forcement un peu plus lourd. Au lieu 
de simplement renvoyer la valeur de progression, nous allons composer le JavaScript 
a executer sur le client. Void l'integralite du fichier. 

Listing 5-26 Le serveur compose le fragment de JavaScript a executer 

#! /usr/bin/env ruby 

require 'webrick' 
include WEBrick 

progress = 
colorChanged = false 

server = HTTPServer. new (: Port => 8042) 

server .mount('/' , HTTPServlet : : FileHandler , './docroot') 

server .mount_proc('/whatsup') do | request, responsel 
response ['Content-Type'] = 'text/plain' 
progress += rand(5) + 1 
progress = 100 if progress > 100 
script = %{ 
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filler .style. width = '#{progress}%' ; 

percent. firstChild.nodeValue = '#{progress}%' ; 
} 
if progress > 50 and ! colorChanged 

colorChanged = true 

script += %{ 

Element.addClassNameCpercent, 'over50') ; 

} 
end 

# Arrive au bout ? Remise a zero pour la prochaine fois ; -) 
if 100 == progress 

script += %{ 

Element. removed assName(status, 'working') ; 
El ement . addCl assName(status , ' done ' ) ; 
} 

progress = 
colorChanged = false 
else 

script += %{ 

gProgressTimer = window. setTimeoutC 

*■ 'checkProgressC" + id + '")', INTERVAL); 
} 
end 

# Nettoyer le script (pensons aux yeux des debogueurs !) 

# --> on vi re 1 'indentation inutile et les lignes vides 
script.gsub!(/A\s+/, ") 

response. body = script 
end 

trap('INT') { server. shutdown } 

srand 
server .start 

La syntaxe %{...} encadre des litteraux textuels ou la syntaxe #{...} permet d'incor- 
porer des portions variables. Cela est fort utile pour manipuler des portions de code, 
ici JavaScript. 

On remarque que notre script repose surla disponibilite de variables filler, percent 
et status, qui sont effectivement definies par le script cote client avant d'appeler 
eval sur notre fragment. 

Et voila ! On peut lancer le serveur, afficher http://localhost:8042/, et voir la barre 
fonctionner comme avant ! Sauf que le JavaScript d'evolution pour chaque etape est 
compose sur le serveur. 
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Void trois exemples de JavaScript retourne : avant 50 %... 

filler. style. width = '16%'; 

percent.fi rstChi Id. nodeValue = '16%'; 

gProgressTimer = window. setTimeoutC checkProgress(" ' + id + ' ") ' , 

INTERVAL) ; 

Au premier passage apres 50 % : 

filler. style. width = '51%'; 

percent.fi rstChi Id. nodeValue = '51%'; 

Element .addClassName (percent , 'over50') ; 

gProgressTimer = window. setTimeoutC checkProgress(" ' + id + '") ' , 

INTERVAL) ; 

En arrivant a 100 % : 

filler. style. width = '100%'; 
percent.fi rstChi Id. nodeValue = '100%'; 
Element. removed assName (status, 'working') ; 
Element. addClassName(status, 'done') ; 

Vbus voyez : rien d'autre que le strict necessaire. 

JSON : l'ideal pour des donnees structures specifiques 

JSON signifie JavaScript Object Notation. II s'agit d'une representation formelle 
d'objets de complexite quelconque, en utilisant uniquement des syntaxes disponibles 
en JavaScript, principalement pour decrire des tableaux et des objets. Le format est 
documente sur http://www.json.org, qui fournit egalement des liens vers les princi- 
pales bibliotheques JSON pour de nombreux langages. 

Les bases de JSON sont tres simples : 

• Un objet est decrit entre accolades ({}), sous forme d'une serie de paires 
nom + valeur, separees par des virgules. Le nom est fourni en tant que chaine de 
caracteres (done encadre par ' ou "), et la valeur peut etre n'importe quel litteral 
JavaScript (ou presque) : chaine de caracteres, nombre, booleen, tableau, null, etc. 

• Un tableau est decrit entre crochets ( [] ), ses elements sont separes par des virgules. 

Par ailleurs, pour faire dans l'impeccable, nous allons egalement renvoyer un en-tete 
de reponse specialise, nomme X-JS0N, qui indique que notre retour est une donnee 
JSON (il n'existe pas de type de contenu dedie pour l'instant, et cet en-tete est 
reconnu par un nombre grandissant de bibliotheques, dont Prototype). 
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Nous allons utiliser comme exemple un affichage de statistiques. Histoire de 
melanger un peu les genres, nous allons afficher un pourcentage sans signification 
particuliere pour trois marches internationaux : le CAC40, le NYSE et le NASDAQ 
accompagne d'un commentaire tire au hasard parmi certaines possibilites. 

Nous avons ici plus qu'une simple donnee textuelle ; nous avons plusieurs occur- 
rences d'une meme information structuree, laquelle comprend trois parties : 

1 le symbole du marche (cac40, nyse ou nasdaq) ; 

2 le pourcentage pour ce marche ; 

3 le texte de commentaire. 

Nous allons done devoir generer une representation JSON ressemblant a ceci 
(l'indentation est juste la pour la lisibilite, elle ha aucun impact en JavaScript) : 



[ 

{ 'symbol ' 
{ 'symbol ' 
{ 'symbol ' 

] 



'cac40', 'percent': 78, 'comment': 'nerveux' }, 
'nyse', 'percent': 16, 'comment': 'calme' }, 
'nasdaq', 'percent': 43, 'comment': 'actif } 



On peut repartir d'un exemple precedent avec barres de progression, car nous allons 
legerement ajuster le code HTML et CSS pour correspondre a nos besoins. 

Void d'abord notre serveur. 

Listing 5-27 Le serveur envoyant des donnees JSON 

#! /usr/bin/env ruby 

require 'webrick' 
include WEBrick 

STOCKS = [ 'cac40', 'nyse', 'nasdaq' ] 

COMMENTS = [ 'actif, 'nerveux', 'calme', 'en folie !' ] 

server = HTTPServer.new(: Port => 8042) 

server .mount('/' , HTTPServlet: : FileHandler , './docroot') 

server .mount_proc(' /stats ') do | request, responsel 
response [' Content-Type ' ] = 'text/plain' 
response[ 'X- JSON'] = true 
data = '[' 

STOCKS. each { | symbol | 

comment = COMMENTS [rand (COMMENTS. size)] 
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data += "\n\t{ 'symbol': '#{symbol} ' , 'percent': #{rand(100)} . 
'comment': '#{comment}' }," 
} 

data. chop! 
data += "\n] M 
response. body = data 
end 

trap('INT') { server . shutdown } 

srand 
server .start 

Cote client, les barres n'ont plus d'icone ou d'animation a leur droite. Chaque barre a 
une taille fixe (le remplissage varie evidemment en fonction du pourcentage), et le 
texte de commentaire prend le reste de la place. On a done le code HTML suivant. 

Listing 5-28 La page HTML client 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xm"lns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

*» charset=iso-8859-15" /> 
<title>Statistiques avec JSON</title> 

<link rel="stylesheet" type="text/css" href="client .css"x/script> 
<script type=" text/ javascript" src=" prototype. js"x/script> 
<script type=" text/ javascript" src=" client. js"x/script> 
</head> 
<body> 

<hl>Statistiques avec 3S0N</hl> 

<p>Statistiques mises a jour toutes les 2 secondes .</p> 
<div class="progressBar" id="progress-cac40"> 
<span class="pbFrame"> 

<span class="pbColorFill"x/span> 
<span class="pbPercentage">0%</span> 
</span> 

<span cl ass="pbComment">n/a</span> 
</div> 

<div class="progressBar" id="progress-nyse"> 
<span class="pbFrame"> 

<span class="pbColorFill"x/span> 
<span class="pbPercentage">0%</span> 
</span> 

<span cl ass="pbComment">n/a</span> 
</div> 



Les mains dans le cambouis avec XMLHttpRequest 

Chapitre 5 



<div class="progressBar" id="progress-nasdaq"> 
<span class="pbFrame"> 

<span class="pbColorFill"x/span> 
<span class="pbPercentage">0%</span> 
</span> 

<span cl ass="pbComment">n/a</span> 
</div> 
</body> 
</html> 

Et la CSS ajustee que void. 
Listing 5-29 La nouvelle CSS 

div. progressBar { 

font-family: sans-serif; 

position: relative; 

margin: lem 0; height: 20px; 

} 

span .pbFrame { 

position: absolute; 

left: 0; top: 0; width: 20ex; height: 16px; 

border: 2px solid #444; 

background-color: silver; 
} 

span .pbColorFill { 

position: absolute; 

left: 0; top: 0; height: 100%; width: 0%; 

z-index: 1; 

background-color: green; 
} 

span .pbPercentage { 

position: absolute; 

left: 0; top: 0; height: 100%; width: 100%; 

z-index: 2; 

font-size: lem; 

line-height: 16px; 

font-weight: bold; 

text-align: center; 
} 

span .pbPercentage. over50 { 

color: white; 
} 
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span . pbComment { 

position: absolute; 

left: 21ex; right: 0; top: 0; line-height: 1.5em; 

color: #444; 

z- index: 2; 



Cote code client, il nous reste a demander toutes les 2 secondes, en mode asyn- 
chrone, des nouvelles de nos marches au serveur. Et bien sur, a traiter le resultat. On 
va voir que, JavaScript interpretant le code JSON comme des objets, cela donne un 
traitement plutot pratique a ecrire. 

Listing 5-30 Le script d'invocation et de traitement des statistiques 

INTERVAL = 2000; 

var gLookupTimer = 0; 

function getRequesterO { 

} // getRequester 

function loadStatsO { 

wi ndow. clearTimeout (gLookupTimer) ; 

var requester = getRequesterO; 

requester. onreadystatechange = functionO { 

if (4 == requester. readyState && 200 == requester. status) { 
var data = $A(eval (requester .responseText)) ; Q 
updateStats(data) ; 

gLookupTimer = window. setTimeout( 'loadStatsO ' , INTERVAL); 
} 

}; 

requester .open('GET' , '/stats', true); 

requester. send (null) ; 
} // loadStats 

function updateStats(data) { 

data.each(function(stock) { Q 

var bar = $( 'progress-' + stock. symbol ) ; 

var filler = document. getElementsByClassName( 
* 'pbColorFilT , bar) .fi rst() ; 

var percent = document. getElementsByClassName( 
'pbPercentage' , bar) .fi rst() ; 

var comment = document. getElementsByClassName( 
*» 'pbComment', bar) .fi rst() ; 

filler. style. width = stock. percent + '%' ; 

percent .fi rstChild.nodeValue = stock. percent + '%' ; 

comment .fi rstChild.nodeValue = stock. symbol .tollpperCaseO 

*»+''+ stock. comment; 
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if (stock. percent > 50) 

Element.addClassName(percent, 'over50') ; 
else 

Element. removed assName(percent, 'over50') ; 

}); 

} // updateStats 

Event. observe(window, 'load', loadStats, false); 

On convertit le resultat en tableau « booste » par Prototype et on passe la main a 

une fonction dediee de traitement. 
Q stock est tour a tour chaque objet statistique. Remarquez comme on a acces 

directement a ses proprietes symbol, percent et comment ! 

Au final, on obtient par exemple ceci. 



Figure 5-11 

L'ecran de statistiques 
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Nous en avons fini avec 1' exploration des principaux types de reponse. J'aime a croire 
que ces exemples auront excite votre imagination et peut-etre suggere des debuts de 
reponse pour vos besoins reels. 

Mais avant de vous jeter dans le code, souvenez-vous que tout ce que nous avons 
accompli jusqu'ici, nous 1' avons realise sans tirer pleinement parti de Prototype et 
sans aucun framework supplementaire. Attendez done d'avoir lu les chapitres sui- 
vants, qui vont simplifier tout cela et ouvrir encore davantage de perspectives, avant 
de partir appliquer ces connaissances a vos developpements. 



6 

Ajax tout en souplesse 
avec Prototype 



Nous avons jusqu'ici utilise Ajax « a la main » : nous avons manipule XMLHttpRequest 
directement, ce qui engendre une certaine complexite, ou tout au moins un volume de 
code important, en particulier si on considere la simplicite du service qu'il rend. Dans 
ce chapitre, nous allons sauter le pas et tirer parti des utilisations predefinies d'Ajax 
proposees par Prototype. 

Avant de commencer, je precise aux lecteurs qui auraient la bonne idee de developper 
avec Ruby on Rails que l'immense majorite des fonctions de Prototype dispose de hel- 
pers tres pratiques a utiliser dans vos vues et templates RJS, qui vous evitent de devoir 
gerer les details. Reportez-vous a la documentation de la classe PrototypeHel perpour 
plus d'informations (http://api.rubyonrails.org). 
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Prototype encore a la rescousse 



En realisant les exemples precedents, on s'apercoit qu'on ecrit pas mal de code de 
« bas niveau » : l'algorithme sinueux d'obtention d'un requeteur, les multiples appels 
pour parametrer et envoyer la requete, et ceci de differentes facons suivant qu'on est 
en POST ou en GET... 

Comme au chapitre 4, Prototype vient a notre rescousse, cette fois-ci pour nous per- 
mettre d'ecrire facilement du code reposant sur Ajax, sans nous soucier des incompati- 
bilites eventuelles entre navigateurs, et d'une facon plus orientee objet, plus elegante. 



Ajax. Request, c'est tellement plus simple ! 



Prototype fournit une aide considerable a l'utilisation d'Ajax au travers de trois 
classes principales et de quelques possibilites annexes, un peu plus esoteriques. Nous 
allons commencer par le comportement de base : l'execution d'une unique requete et 
le traitement de sa reponse. 

Commencons par une utilisation appliquee, en ajustant notre exemple de sauvegarde 
automatique, issu du chapitre precedent. Nous attendrons la prochaine section pour 
dresser un inventaire detaille des possibilites. 

Recopiez votre arborescence de travail pour l'exemple de sauvegarde automatique 
que nous avions realise comme premiere application d'un type de reponse « texte 
simple ». Nous allons simplement modifier le script dedie, dans le fichier cl i ent . js. 
Ces modifications consistent a : 

1 Retirer notre fonction getRequester (enfin !). 

2 Modifier le code de syncName pour tirer parti de Prototype au lieu de recuperer, 
configurer, executer et traiter manuellement notre requete et sa reponse. 

Void le texte integral de notre nouveau cl i ent . j s. 

Listing 6-1 Le nouveau script client pour notre sauvegarde automatique 

function bindTextField(e) { 

Event .observe($('edtName') , "blur", syncName, false); 
} // bindTextField 
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function syncName(e) { 

new Ajax. Request ( ' /save_name ' , 
{ 

method: 'get' , 

parameters: $H{ 'name': $F('edtName') }) .toQueryStringO , 

onComplete: function(requester) { 

if (this. responselsFailureO || null == 

*» requester. responseText.match(/A200/)) 
alert('Le nouveau nom n\'a pas pu etre sauvegarde !'); 
} 

}); 

} // syncName 

Event. observe(window, "load", bindTextField, false); 

Comme vous le voyez, c'est assez court. Les lecteurs attentifs (done vous) auront 
remarque 1' absence d'un appel de type send(). La raison est simple: un objet 
Ajax . Request declenche sa requete immediatement apres initialisation. 

Celle-ci comprend deux arguments : l'URL de base a invoquer (sans les parametres, 
contrairement a notre code manuel precedent) et un tableau associatif d'options. 
Celles-ci sont nombreuses, mais contentons-nous pour l'instant d'expliciter les trois 
que notre exemple utilise : 

• method permet d'indiquer la methode HTTP a utiliser pour la requete. Par defaut 
a post, elle est ici modifiee en get, conformement aux exigences de notre couche 
serveur, qui n'a pas change. 

• parameters permet de preciser des parametres pour une requete de type get, qui 
seront places dans la query string de FURL (le point d'interrogation est ajoute 
automatiquement). Cette valeur doit etre encodee. 

• onComplete fournit une fonction de rappel qui sera invoquee une fois la reponse 
terminee (quel que soit l'etat du requeteur). 

Dans ces fonctions de rappel, thi s est associe a l'objet Ajax. Request qui les invoque. 
C'est pourquoi on dispose, entre autres, d'une methode responselsFailureO, qui 
permet de determiner qu'un probleme a ete rencontre par le requeteur. 

A part 9a, rien ne change ! Sur un exemple aussi simple, on ne se rend pas bien 
compte de la puissance offerte par Ajax. Request. Aussi, la section suivante explore 
cette classe plus en detail, afin de vous mettre l'eau a la bouche... 
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Plus de details sur Ajax. Request 

Techniquement, cette classe herite de Ajax. Base, ce qui permet a ses objets de recu- 
perer trois methodes. 



Methode Description 


responselsFailureO Methode a n'appelerqu'apres la fin de la requete, qui determine si un pro- 

bleme a ete rencontre. L'exact inverse de responselsSuccessO. 


responselsSuccessO 


Methode a n'appeler qu'apres la fin de la requete, qui verifie que la 
requete s'est bien passee, c'est-a-dire que la propriete status du reque- 
teur est soit indefinie, soit nulle (zero), soit dans la tranche 200-299. 


setOpti ons (opti ons) 


Permet de definir les options de requete, en definissant d'abord les valeurs 
par defaut decrites plus bas, puis en appliquant celles foumies sous forme 
d'un tableau associatif ou d'un objet. 



Tous les requeteurs Ajax de Prototype partagent un certain nombre d'options. En 
void la liste. 



Tableau 6-1 Les options disponibles pour Ajax.Request et ses versions specialises 



Option Defaut Description 


asynchronous 


true Mode de synchronisation de la requete. On n'y touche generalement 
pas. 


method 


'post' 


Methode HTTP a utiliser. Valeurs possibles garanties : ' get ' et 
' post ' . Les standards en cours d'elaboration exigent neanmoins 
aussi le support de ' put ' , ' del ete ' et ' head ' , notamment 
pour faciliter I'acces Ajax a des API de type REST. La casse est sans 
importance. 


onLoaded, 

onlnteractive, 

onComplete 


undefined 


Fonctions de rappel pour les etats « envoye », « en reception » et 
« reception terminee », respectivement. Cela permet de separer le 
code affecte a chaque etape du traitement, plutot que d'avoir a tester 
la propriete readyState du requeteur. On n'utilise toutefois que 
rarement les deux premieres. 


onSuccess, 
onFailure, 
onXYZ 


undef i ned II est possible de distinguer encore plus avant en separant le code de 
traitement apres requete couronnee de succes, de celui de reaction en 
cas de probleme. On peut meme associer un rappel a un code de 
retour precis (par exemple, 302, 201 , etc. II suffit de definir une asso- 
ciation nommee d'apres le code, comme on302). Ces fonctions sont 
appelees avant (et non a la place de) une eventuelle fonction associee 
a onComplete. 


onException 


undef i ned Gestionnaire d'exceptions dans la couche client de requetage. Prend 
deux arguments : I'objet Ajax. Requester qui a rencontre un pro- 
bleme, et I'exception JavaScript qui a ete levee. 
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Tableau 6-1 Les options disponibles pour Ajax.Request et ses versions specialises (suite) 

Option Defaut Description 

parameters ' ' Parametres URL encodes pour une requete GET (sans le ? initial) 

postBody 



undefined 



Corps de requete pour une requete POST. Ce sera generalement de 
I'URL encode aussi. 



requestHeaders undef i ned Permet de definir des en-tetes de requete, par exemple un en-tete 

Accept pour demander un type de contenu reponse particulier. II 
doit s'agir d'un tableau au nombre d'elements pair, constitue de cou- 
ples nom/valeur. Par exemple, pour demander un resultat XML, on 
pourrait faire : 
new Ajax. Request ( '/tion_url_cible' , { 

requestHeaders: [ 'Accept', 
*■ 'application/xml ' ], 

onSuccess: function(req) { 

// traitement de req . responseXML 
} 

}); 

Ne pas confondre avec la methode header, decrite plus bas, qui per- 
met de consulter les en-tetes emis dans la reponse. 



Information parfois utile : tout objet Ajax.Request dispose, une fois le requeteur 
interne cree, d'une propriete transport qui reference ce requeteur. 

Autre point notable : si la reponse est renvoyee avec un type MIME text/ 
javascript, son contenu texte sera considere comme un fragment de JavaScript a 
evaluer, et sera done evalue automatiquement. Pour les curieux, sachez que cette eva- 
luation a lieu apres les eventuels onSuccess, onFailure ou onXVZ, mais avant l'even- 
tuel onComplete. 

En parlant de contenus particuliers, sachez que chaque fonction de rappel 
(onException n'est pas concernee) recoit deux arguments: d'abord l'objet 
XMLHttpRequest en cours d'utilisation, ensuite un booleen indiquant si le contenu 
renvoye est signale comme contenu JSON (au moyen de l'en-tete de reponse 
X-JSON). Ce deuxieme argument n'a toutefois de sens qu'une fois la requete terminee 
avec succes, done dans onSuccess et eventuellement onComplete. S'il est vrai, vous 
pouvez done evaluer le texte de reponse. Petite astuce au passage : vous pouvez vous 
simplifier legerement la tache en ecrivant : 

thi s . eval Response () 
au lieu de : 



I eval (req. responseText) 
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Les deux renvoient le resultat de revaluation, ce qui est bien pratique pour recuperer 
l'objet dont la representation JSON a ete fournie en reponse. 

Enfin, Ajax. Request fournit une methode supplemental, header (name), qui ren- 
voie l'en-tete de reponse demande. Cette methode n'a done d'utilite qu'une fois la 
requete terminee. Elle correspond a la methode getResponseHeader de 
XMLHttpRequest. 

Voila, a present vous savez tout sur Aj ax . Request ! 



Ajax.Updater : mettre a jour un fragment XHTML, 
executer un script 

Evidemment, Prototype ne s'arrete pas la (ce n'est pourtant deja pas mal !). II fournit 
d'autres mecanismes, dedies a des utilisations recurrentes d'Ajax. L'un d'eux est 
fourni par la classe Ajax . Updater, qui est specialisee dans l'envoi de requetes dont la 
reponse est censee mettre la page a jour. II s'agit naturellement d'une classe fille de 
Ajax. Request. 

Neanmoins, le constructeur n'est plus tout a fait le meme : avant les arguments 
d'URL et d'options, Ajax.Updater prend un premier argument designant l'element 
qui fera l'objet d'une mise a jour. Comme la plupart du temps avec Prototype, cet 
argument peut etre une Stri ng contenant l'ID de l'element, ou l'element lui-meme. 
On verra un peu plus tard qu'il existe aussi une autre forme, plus avancee, pour ce 
premier argument. 

Remarquez egalement que dans la mesure ou le traitement de la reponse est entiere- 
ment automatique, definir des fonctions de rappel telles que onComplete ou 
onSuccess n'a pas beaucoup d'interet... S'il ne s'agit alors que de traitements generi- 
ques a toutes vos requetes Ajax (journalisation, etc.), il existe de meilleurs moyens, 
que nous verrons un peu plus loin. 

Armes des connaissances acquises dans le precedent chapitre, nous savons que les 
deux grands cas de figure pour une reponse modifiant la page sont : XHTML et 
JavaScript. II y a done deja une distinction potentielle sur le type du contenu renvoye. 

II y a aussi diverses possibilites sur le type de la mise a jour : s'agit-il de remplacer un 
fragment du document (une valeur de pourcentage par exemple, qui aura peut-etre 
evolue), ou d'ajouter au document ? Et dans ce deuxieme cas, ou l'insertion doit-elle 
avoir lieu ? 
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Malgre l'apparente complexite engendree par la combinaison de ces possibilites, Pro- 
totype nous permet de preciser tres simplement nos besoins a l'aide de deux options 
supplementaires. 

Tableau 6-2 Options supplementaires pour Ajax.Updater 



Option Defaut Description 


eval Scripts 


false 3 


Active 1'evaluation automatique de scripts (c'est-a-dire de code JavaScript), 

La, vous etes tout surpris, car je vous ai explique tout a I'heure que 

Ajax. Request (et done Ajax.Updater) evaluent automatiquement les 

scripts JavaScript renvoyes. C'est juste, mais uniquement si la reponse affiche un 

type MIME text/javascri pt. 

Afin de permettre a ceux qui ne pourraient pas manipuler les en-tetes dans la 

reponse HTTP de beneficier de cette possibility Prototype offre cette option, dont 

I'activation preservera les portions <script...>...</script> du corps de la 

reponse, au lieu de les supprimer. Le corps final etant insere dans le document, le 

script ainsi fourni sera effectivement evalue ! 

Notez au passage qu'en laissant cette option desactivee, Prototype vous protege 

contre des attaques malicieuses a base de script dans le contenu renvoye (par 

exemple dans le cadre d'une syndication de contenu). 


insertion 


undefined 


Toute la flexibilite de Ajax.Updater vientde la ! En laissant cette option indefi- 
nie, vous causerez le remplacement du contenu de I'element designe via le cons- 
tructed. C'est ideal pour mettre a jour un texte ou meme un fragment DOM a 
remplacer completement, par exemple tout ou partie d'un graphique SVG (ce qui 
est assez glamour, je trouve). 

Mais que faire lorsqu'il s'agit de completer le document, par exemple pour ajouter 
un commentaire ou un envoi sur un forum en ligne « live » ? II suffit de preciser ici 
I'une des classes d'insertion foumies par Prototype, c'est-a-dire I'une des classes 
definiesa I'interieurde I'espace de noms Insertion. Vous en retrouverez la liste 
dans le tableau suivant. 



a. En realite, undefined, ce qui est plus coherent pour marquer I'absence de definition. Mais comme vous le savez, evalue comme un 
booleen, cela equivaut a false. 

Nous evoquons dans ce tableau le mecanisme des insertions, qui permet de ne pas 
remplacer le contenu de I'element, mais plutot d'ajouter du contenu. Ces ajouts 
dependent de la classe utilisee pour l'insertion et Prototype fournit des classes adap- 
tees a chaque besoin. Nous les avons deja etudiees au chapitre 4, mais je vous offre un 
petit rappel. Les resultats presentes dans le tableau ci-dessous supposent le fragment 
XHTML initial suivant : 



<P> 



</p> 



<span id="co"lmin">Graff</span> 
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Et l'execution ulterieure d'un code de type : 

I new Insertion. LaCTasseDInsertionC colmin' , ' <em>Hyrum</em> ') 

Void les classes d'insertion disponibles. 



Tableau 6-3 Classes d'insertion pour I'ajout de contenu au DOM 



Classe 


Emplacement 






de I'insertion 




Insertion .After 


Immediatement 


<P> 




apres I'element. 


<span id="co"lmin">Graff</span> <em>Hyrum</em> 

</p> 


Insertion .Before 


Immediatement 


<P> 




avant I'element. 


<em>Hyrum</em> <span id="colmin">Craff</span> 
</p> 


Insertion .Bottom 


Apres le contenu 


<P> 




de I'element. 


<span id="colmin">Craff <em>Hyrum</em> </span> 
</p> 


Insertion. Top 


Avant le contenu 


<P> 




de I'element. 


<span id="colmin"> <em>Hyrum</em> Craff</span> 
</p> 



A present que nous avons couvert a nouveau la theorie, voyons comment adapter 
notre exemple de reponse XHTML. Copiez votre repertoire de travail pour 
l'exemple de reponse XHTML et modifiez le fichier client.js : retirez notre 
fonction getRequester et modifiez swi tchToAJAX pour obtenir le code suivant. 

Listing 6-2 Le nouveau script client pour notre mise a jour XHTML 

function bindFormO { 

Event .observe($('commentForm') , 'submit', switchToAJAX, false); 
} // bindForm 

function switchToAJAX(e) { 
Event .stop(e) ; 
var data = $H({ 

'name': $F('edtName') , 

vemaiV: $F('edtEmai"lv) , 

'comment': $F('memComment') 
}) .toQueryStringO ; 
new Aj ax. UpdaterC comments ' , ' /add_comment ' , 

{ 

post Body: data, 

insertion: Insertion. Bottom 

}); 
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} // switchToAJAX 

Event. observe(window, 'load', bindForm, false); 

Avouez que c'est impressionnant ! Vous pouvez lancer votre script serveur . rb, afficher 
http://localhost:8042 et rafraichir en forcant le contournement du cache, vous verrez : 9a 
marche toujours (heureusement, ceci dit !). C'est « juste » plus court et plus elegant. 

Inutile de presenter un exemple d'utilisation de l'option eval Scripts. D'une part, la 
plupart des technologies cote serveur que vous pourriez utiliser vous permettent de 
modifier les en-tetes de reponse : un simple Ajax. Request sur une reponse de type 
text/javascript suffira done amplement. D'autre part, la mise en ceuvre de 
eval Scripts est, vraiment, tellement simple quelle se passe d'exemple ! II suffit 
d'encoder son JavaScript pour eviter les chevrons (< et >) litteraux et d'encadrer le 
tout par <script type="text/javascript"> et</script>. 

Differencier la mise a jour entre succes et echec 

Lorsque j'ai presente Ajax . Updater, j'ai precise qu'il existait une forme plus avancee 
pour le premier argument du constructeur. En effet, tel que nous l'avons utilise 
jusqu'a present, il effectue la mise a jour meme si la requete a echoue (e'est-a-dire si, 
dans la fonction de rappel onComplete, la methode responselsFailureO renvoie 
true) ! Ce n'est pas forcement ce qu'on veut. 

On a deux comportements alternatifs possibles : 

• On souhaite une mise a jour en cas de reussite uniquement. 

• On souhaite des mises a jour differentes suivant que la requete a reussi ou echoue 
(par exemple, on a un fragment de page dedie aux messages d'erreur, message que 
nous renverrait la couche serveur en cas de probleme). 

Ces deux cas de figure ont recours au meme mecanisme : il s'agit de ne pas passer, 
comme premier argument au constructeur, la designation d'un seul element, mais 
plutot de lui passer un objet designant les elements en cas de succes et d'echec. 

Cet objet, generalement anonyme, a simplement besoin de fournir une designation 
(1' element lui-meme ou une Stri ng avec son ID) dans sa propriete success, et even- 
tuellement une seconde dans sa propriete failure. 

• Si vous ne fournissez qu'une propriete success, l'echec ne donnera lieu a aucune 
mise a jour. 

• Si vous fournissez les deux, l'echec mettra a jour l'element designe par la propriete 
failure. 

• II ne sert a rien (et il serait par ailleurs illogique) de ne preciser qu'une propriete 
failure... 
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Void un exemple classique : 

new Ajax. Update r({ success: 'cartltems', failure: 'errorMsg' }, 

'/purchase' , 

{ 

postBody: "MneltemData, 
insertion: Insertion. Bottom 

}); 



Presque magique : Ajax. Periodical Updatcr 



Si Ajax. Updater vous a plu, vous allez adorer Ajax. PeriodicalUpdater ! Attention, 
la seconde n'est pas une classe fille de la premiere. En effet, il ne s'agit pas d'un type 
specialise de requeteur, mais d'un mecanisme de repetition intelligent autour d'une 
utilisation normale de Ajax. Updater. 

Un objet Ajax. PeriodicalUpdater se construit strictement comme un objet 
Ajax. Updater, mais dispose de deux options supplementaires. 



Tableau 6-4 


Options supplementaires pour Ajax.PeriodicalUpdater 


Option Defaut Description 


frequency 


2 


Periode (oui, Sam Stephenson n'est pas tres au point sur le couple fre- 
quence/periode...), en secondes, entre deux invocations de 
Ajax . Updater. Evitez de preciser de trap petites valeurs (par exemple 
. 1 alors que vous n'etes pas en intranet et sur un serveur rapide), sans 
quoi vous risqueriez, au mieux, d'obtenir un comportement incoherent, 
au pire, de geler le navigateur, voire la machine. 


decay 


1 


(Prononcez « di-kay ») Signifie litteralement decomposition, decrepi- 
tude, deliquescence... Et pourtant, c'est une fonctionnalite qui, pour etre 
avancee, n'en est pas moins precieuse. Elle permet de demander un allon- 
gement progressif de la periode (done, pour les pointilleux, une baisse de 
la frequence) lorsque le resultat ne varie pas d'une requete a I'autre. 
Explications plus en detail a la prochaine section. 



Autre precision de taille : une methode stopO permet d'arreter le cycle d'invocations. 
S'il s'agit d'un arret temporaire, vous pouvez relancer le traitement ulterieurement 
avec la methode start (), appelee automatiquement apres l'initialisation de 1' objet. 

Par ailleurs, la fonction de rappel onComplete a ici une utilite, contrairement au cas 
de Ajax. Updater. En effet, la fonction de rappel serait invoquee a la fin de la 
methode stopO (et non en fin de reception de reponse Ajax). 
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Comprendre I'option decay 

Void comment I'option decay fonctionne : a chaque requete dont le resultat est iden- 
tique a celui de la precedente, la valeur active de decay (qui demarre a celle de 
I'option) est multipliee par la valeur de I'option. La periode avant la prochaine 
requete est alors definie en multipliant la periode (option frequency) par le decay 
actif. En revanche, des qu'une requete ramene un resultat different, le decay actif 
repasse a 1 (un). 

Done, une option decay de 1 (un) revient a desactiver cette fonctionnalite. C'est le 
cas par defaut. Et une option decay inferieure a un serait contre-productive : alors 
que rien n'a Fair de se passer cote serveur, on demanderait de plus en plus souvent ce 
qui se passe ! 

Imaginons en revanche une option decay a 2 (histoire de simplifier les valeurs, parce 
qu'en realite, on opte plutot pour une valeur entre 1,1 et 1,5 dans la plupart des cas). 
Void un petit tableau resumant une sequence d'appel. 





Tableau 6-5 


Execution d'un Ajax.PeriodicalUpdater, option decay a 2 


Moment Decay Periode transport. Reaction 
actif responseText 


00:00 


2 


2 


42 


Reponse differente (pas d'anterieur) : decay] . 


00:02 


1 


2 


54 


Idem. 


00:04 


1 


2 


54 


Reponse identique : decay x option decay, et comme 
periode = option frequency x decay... 


00:08 


2 


4 


57 


Reponse differente : decay 1 . 


00:10 


1 


2 


57 


Meme comportement qu'a 00:04. 


00:14 


2 


4 


57 


C'est le debut du grand ralentissement... 


00:22 


4 


8 


57 




00:38 


8 


16 


57 


32 secondes avant la prochaine requete ! 


01:10 


16 


32 


63 


Ah, enfin I On retombe a decay 1 . 


01:12 


1 


2 


64 




01:14 


1 


2 


66 


Et visiblement, le serveur s'est « decoince » ! 



Petits secrets supplementaires 

Tant qu'a explorer les possibilites Ajax de Prototype, autant ne pas se limiter aux utilisa- 
tions courantes (je parie que vous aussi, vous aimez en savoir plus que les autres), non ? 
Jetons done un coup d'ceil sur quelques points moins frequemment mis en lumiere. 
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Commencons avec deux petits details : l'espace de noms Ajax fournit, en plus des 
trois classes que nous venons d'explorer, une methode getTransportO et une pro- 
priete activeRequestCount. 

La premiere est sans mystere: Ajax. getTransportO est la methode appelee, en 
interne, par les classes de requete pour obtenir le requeteur, c'est-a-dire l'objet 
XMLHttpRequest a proprement parler. C'est l'equivalent de notre bonne vieille fonc- 
tion getRequester, mais en tellement plus joli : 

Listing 6-3 Ne vous avais-je pas dit que getTransportO etait esthetique ? 

return Try.these( 

functionO {return new ActiveX0bject('MsxmT2 .XMLHTTP')} , 
functionO {return new ActiveXObject('Microsoft.XMLHTTP')} , 
functionO {return new XMLHttpRequestO} 
) II false; 

Decidement, Try. these, c'est bien pratique... Et ce code n'est que marginalement 
plus lent que notre getRequester. 

La propriete Ajax. activeRequestCount est tenue a jour automatiquement par Pro- 
totype et fournit le nombre de requeteurs crees mais dont le traitement n'est pas 
encore termine. On imagine l'utilite eventuelle de cette propriete dans un contexte 
de journalisation ou de surveillance de l'activite Ajax de la page. 

Et cependant... 

Puisque getTransportO se contente de renvoyer un objet XMLHttpRequest, objet sur 
lequel il n'a pas de controle particulier, comment diable Prototype fait-il pour etre 
tenu au courant de la fin de traitement des requeteurs ? (Vous vous etes bien pose la 
question, n'est-ce pas ?) 

Si vous etes comme moi, vous n'aimez pas l'impression de boite noire qu'on a en 
decouvrant un nouveau framework. Dissipons done rapidement le voile de mystere 
qui plane sur cet apparent tour de force : Prototype utilise tout simplement le dernier 
secret dont je voulais vous parler : Ajax . Responders. 

Ajax.Responders est un objet global qui fournit un point centralise d'inscription 
pour des fonctions de rappel globales a tous les requeteurs. En d'autres termes, une 
fonction de rappel enregistree aupres de Ajax.Responders s'ajoute a celles definies 
pour tout Ajax. Request ou Ajax.Updater (et par consequent, tout 
Ajax. PeriodicalUpdater egalement). 

Ce qui signifie, incidemment, que si vous obtenez un requeteur manuellement en 
appelant getTransport, il n'est pas concerne (remarquez bien que vous n'avez pas de 
raison particuliere de bouder ainsi les mecanismes standards). 
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Prototype se contente done d'enregistrer d'office aupres de Ajax.Responders deux 
fonctions de rappel, pour onCreate et onComplete, qui maintiennent notre fameux 
activeRequestCount a jour. C'est tout simple ! 

En ce qui nous concerne, Ajax.Responders a deux methodes interessantes : 
register et unregister, dont les noms sont plutot explicites. Chacune prend en 
parametre un objet dont les methodes ont les noms des rappels souhaites. II peut 
s'agir d'objets anonymes, comme justement dans Prototype : 

Ajax.Responders . register({ 
onCreate: functionO { 

Ajax. activeRequestCount++; 
}, 

onComplete: functionO { 

Ajax. activeRequestCount-- ; 
} 

}); 

Remarquez qu'ici, Prototype n'ayant que faire des details des requeteurs, il ne 
nomme pas les parametres pourtant passes aux fonctions de rappel : le requeteur 
(XMLHttpRequest) et le statutJSON de la reponse (booleen, deja evoque plus haut). 

Les fonctions de rappel globales ainsi definies sont appelees immediatement apres les 
fonctions de rappel specifiques a chaque requeteur (telles que celles que nous avions 
definies jusqu'a present). 

Notez toutefois que les rappels speciaux onSuccess, onFailure et onXVZ (rappels 
numeriques) ne participent pas a ce mecanisme : il ne peut pas y avoir de tels rappels 
globaux. Seuls les rappels cales sur le cycle de vie d'un requeteur, ainsi que les ges- 
tionnaires d'exceptions, sont eligibles a un traitement global. 

Enfin, pour la petite histoire, sachez que Ajax.Responders est un Enumerable. Si 
cela ne vous dit rien, pretez done l'oreille : entendez-vous le champ de sirene du cha- 
pitre 4 ? Ne lui resistez pas ! Je vous attendrai sagement ici. 

Voila, croyez-le ou non, entre le chapitre 4 et celui-ci, nous avons fait une explora- 
tion raisonnablement complete de Prototype (en somme, nous avons laisse de cote 
les details internes et l'objet Position, mais pour le reste, nous avons vu tout ce qui 
pouvait nous etre utile). 

Void done une des promesses de ce livre, et plus particulierement de ce chapitre, qui 
est tenue. Mais je ne vous ai pas appate jusqu'ici sur la base de cette seule promesse, 
j'ai aussi fait allusion au monde merveilleux des effets visuels riches et d'interfaces 
utilisateurs tres dynamiques, avec du glisser-deplacer, de la completion automatique 
de texte, et autres merveilles... II est temps d'assumer ces allusions. Le chapitre 7 va 
vous plonger dans script.aculo.us. 
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Pour aller plus loin... 

Livres 

Pragmatic Ajax: A Web 2.0 Primer 
Justin Gehtland, Ben Galbraith, Dion Almaer 
Pragmatic Programmers, mars 2006, 296 pages 
ISBN 0-9766940-8-5 

Dont la version francaise est : 

Ajax par la pratique 

O'Reilly France, mai 2006, 250 pages 

ISBN 2-84177-387-6 

Sites 

On compte aujourd'hui de nombreuses communautes Ajax etablies. Pour n'en citer 
que trois : 

• Ajaxian : http://ajaxian.com 

• AjaxPatterns : http://ajaxpatterns.org 

• Ajax Developer's Journal : http://ajaxdevelopersjournal.com 

Baekdal.com, le site de Thomas Baekdal. Vous y trouverez de nombreux articles de 
bonne qualite (voire excellents) autour d'Ajax et des technologies Web 2.0 : 
http://baekdal.com. 

Groupe de discussion 

Le groupe Google RubyOnRails-Spinoffs a ete cree en aout2006 pour servir de 
centre d'aide technique, avec les avantages d'indexation et de recherche de Google. 
On y trouve de nombreux membres avec un bon niveau technique. 

http://groups.google.com/group/rubyonrails-spinoffs 

Canal IRC 

Enfin, il faut noter qu'on trouve souvent une reponse rapide et fiable sur le canal IRC 
dedie a Prototype, heberge sur l'incontournable serveur i re . f reenode . net. Le canal 
se nomme tout simplement #prototype. 



7 

Une ergonomie de reve 
avec script.aculo.us 



II est temps d'explorer l'univers des effets visuels, des comportements avarices, et de 
leur impact ergonomique avec script.aculo.us. Nous prendrons aussi le temps de refle- 
chir a la problematique, parfois subtile, de l'accessibilite des interfaces utilisant Ajax. 
Nous conclurons avec un tour d'horizon des principaux frameworks que nous n'aurons 
pas eu la place de traiter. 

Avant de commencer, je precise aux lecteurs qui auraient la bonne idee de developper 
avec Ruby on Rails que l'immense majorite des fonctions de script.aculo.us dispose de 
helpers tres pratiques a utiliser dans vos vues et templates RJS, qui vous evitent de 
devoir gerer les details. Reportez-vous a la documentation de la classe 
ScriptaculousHelper pour plus d'informations (http://api.rubyonrails.org). 



Ml Aiax, ou I 'art de chuchoter 

M DEUXIEME PARTIE 

Une ergonomie haut de gamme avec script.aculo.us 

Rendons visite a Thomas Fuchs, le jeune Autrichien auteur de script.aculo.us (entre 
autres jolies choses). 

Cette bibliotheque JavaScript reussit le veritable tour de force de mettre a disposition 
de tout un chacun, sous forme de petits objets JavaScript faciles d'emploi, des effets 
visuels et elements d'interfaces utilisateur complexes, et cela, sur la plupart des navi- 
gateurs (comprendre : sur MSIE aussi !). Chapeau bas, Herr Fuchs ! 

Mais je sens bien que je ne saurais vous convaincre sur la seule base de mon enthou- 
siasme debordant. Dans ce cas, permettez-moi de vous montrer. 

Commencez par recuperer script.aculo.us : vous la trouverez a la racine de l'archive 
des codes source, ou sur 1' excellent site de la bibliotheque, rempli de documentations, 
exemples, demonstrations, etc. : http://script.aculo.us. Choisissez l'onglet downloads et 
prenez la version la plus recente (1.6.4 a l'heure ou j'ecris ces lignes), dans le format 
d'archive que vous preferez. Vous y piocherez les fichiers JS dont nous aurons besoin 
(pas tous !) au fil de nos exemples, dans les repertoires 1 i b et s re de l'archive. 



Quaute Des tests a foison ! 

script.aculo.us montre I'exemple en prouvant avec brio qu'il est parfaitement possible d'appliquer une 
methodologie de test rigoureuse a du code JavaScript. La bibliotheque est dotee de plus de 80 tests uni- 
taires regroupant environ 1 000 assertions, executables et consumables de facon automatisee. Plusieurs 
dizaines de tests fonctionnels sont egalement maintenus. 

Ouvrez par exemple la page test/run_unit_tests . html dans votre navigateur et executez les 
tests unitaires. Vous allez etre impressionnes ! 



Charger script.aculo.us 

On trouve une petite innovation interessante dans script.aculo.us, rien que dans la 
facon dont la bibliotheque se charge. Plutot que de mettre en place un enorme fichier 
JS monolithique, qui aurait un impact considerable sur le chargement et eventuelle- 
ment la consommation memoire, script.aculo.us est decoupee en plusieurs fichiers. 

Mais ceci, en soi, n'est pas innovant du tout. Ce qui est inedit, e'est le confort qui 
nous est offert pour exprimer nos souhaits de chargement parmi ces modules. Plutot 
que de nous imposer un element <scri pt> par module (en veillant a placer le noyau, 
scriptaculous. js, en premier), une syntaxe speciale de chargement est prise en 
charge par la bibliotheque : il suffit de passer un parametre 1 oad a notre fichier 
noyau, qui contient une liste des modules complementaires qui nous interessent, 
separes par des virgules. Par defaut, tous les modules sont charges: builder, 
effects, dragdrop, controls et slider. Mais si, comme nous dans un instant, vous 
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n'avez besoin que d'une partie, precisez les modules concernes dans votre balise de 
chargement. Par exemple : 

<script type="text/javascript" src="scriptacu"lous. js?load=effects"> 
</script> 

Plus rapide, plus leger... Mieux, quoi. 



Les effets visuels 

Nous allons d'abord examiner les effets visuels. lis sont decoupes en trois categories : 

• Les effets dits « noyau » (core effects), qui sont fondamentaux. 

• Les effets dits « combines », qui associent des effets noyau et ajoutent parfois du 
comportement supplemental pour obtenir des effets avances. 

• Les effets du « coffre au tresor », fournis par des tiers sur le site de script. aculo.us, 
qui sont une categorie non officielle d'effets combines. 

Nous n'irons pas jouer avec cette derniere categorie, et nous ne verrons pas en detail 
tous les effets officiels, mais nous allons tout de meme en explorer plusieurs, et 
decrire brievement les autres. 

Avant de realiser quelques exemples, nous allons explorer les effets noyau et les con- 
cepts generaux d'utilisation des effets. La prochaine section contient de nombreuses 
informations de reference. 



Les effets noyau 



Tous les effets, noyau comme combines, sont fournis sous forme de classes disponi- 
bles dans l'objet global Effect. On compte 5 effets noyau dans script.aculo.us, sur 
lesquels se basent tous les autres. 



Classe 

Effect. Opacity 



Tableau 7-1 Effets noyau de script.aculo.us 

Description 

Modifie I'opacite (ou la transparence, suivant le point de vue) de I'element. Une 
opacite de % est une transparence totale (position . de I'effet). Attention, 
dans MSIE, I'element doit avoir un layout pour beneficier de cet effet. Si vous utili- 
sez une vieille version de script.aculo.us, mettez-vous a jour ou consultez la page 
http://wiki.script.aculo.us/scriptaculous/show/GivingElementsLayout 
pour voir comment gerer ce detail. 



Effect . Seal e Ajuste progressivement la taille de I'element et de son contenu jusqu'a un pour- 

centage donne. Dispose de nombreuses options specifiques. 
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Tableau 7-1 Effets noyau de script.aculo.us (suite) 



Classe Description 


Effect.MoveBy 


Deplace I'element d'un certain nombre de pixels, verticalement et horizontale- 
ment. [.'element doit etre positionne (absolute ou relative) pour que I'effet 
fonctionne sur MSIE. 


Effect. Highlight 


Classiquement connu sous le nom Fade To Yellow, cet effet realise un fondu 
enchame de couleurs de fond pour I'element. Ideal pour appeler I'attention de 
I'utilisateur sur un element fraTchement ajoute ou modifie par un traitement Ajax. 
Nous verrons plus bas quelques precautions d'emploi. 


Effect. Parallel 


Constitue la base de realisation des effets combines, en permettant de synchroni- 
ser plusieurs effets (noyau ou combine), generalement sur un meme element. Nous 
verrons dans un exemple que sa syntaxe d'invocation est particuliere. 



Invocation de I'effet 

Lancer un effet utilise toujours le meme style de syntaxe (sauf pour un Parallel) : 
I new Effect. NomDeLEffet(elementf, parametres_requis] [, options]') ; 

Comme d'habitude, le premier argument peut etre un ID ou I'element lui-meme. 
Tant les parametres que les options sont conceptuellement des hashes, done des objets 
anonymes la plupart du temps, avec une propriete par parametre ou option. Enfin, 
notez le new au debut, qui est trop souvent omis, mais devient vite obligatoire 
lorsqu'on souhaite declencher plusieurs effets en parallele. 

Les parametres requis varient d'un effet a l'autre ; dans certains cas, il n'y a aucun 
parametre requis : on peut alors s'en passer et ne fournir que d'eventuelles options. 

Options communes a tous les effets noyau 

Tout effet noyau reconnait les options suivantes. 

Tableau 7-2 Options communes a tous les effets noyau 



Option Description 


duration 


Duree de I'effet, en secondes. Nombre a virgule. 1 . par defaut. 


fps 


Nombre d'ajustements par seconde (frames per second). 25 par defaut, tres largement 
suffisant. Limite a 100, mais je ne vois vraiment pas quel interet on aurait a depasser 
environ 50, seuil absolu de la vision humaine. 


delay 


Attente, en secondes, avant le demarrage de I'effet. . par defaut. 
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Tableau 7-2 Options communes a tous les effets noyau (suite) 

Option Description 

transition Fonction assurant la progression de I'effetdans le temps (succession des valeurs entre 
from et to). II existe 8 transitions predefines, toutes dans Effect .Transition : 
-sinoidal (par defaut) augmente la vitessede I'effet aufil de son deroulement ; 
- 1 i near maintient une vitesse fixe, souvent moins elegante ; 

- reverse inverse le deroulement de I'effet : il s'effectue de sa fin a son debut. ; 
-wobble ameneuncomportement « dessert en gelee » a revolution de I'effet lui-meme, 
tres visible sur, par exemple, Effect . Seal e ; 

- f 1 i cker donne une impression de clignotement basee sur les 25 % finaux de I'effet ; 
-pulse accelere un effet de base pour le repeter 5 fois au court de sa duree prevue (uti- 
lise par exemple pour realiser I'effet Pul sate) ; 

- none laisse I'element dans son etat en debut d'effet ; 

- f ul 1 amene immediatement I'element en fin d'effet. 



from 



to 



sync 



Position au sein de I'effet en debut de traitement. Nombre entre . (0 %) et 1 . 
(100%). 0.0 par defaut. 

Meme chose, mais pour la fin du traitement. 1 . par defaut. 

Determine si la progression est automatique (true, par defaut), ou s'il faut manuelle- 
ment progresser (false) en appelant render () sur I'effet. Utilise en particulierdans le 
cadre d'un Effect. Parallel pour gerer plusieurs effets s'executant de facon syn- 
chroniser. 



queue (depuis Permet de placer I'effet courant dans une file d'effets. Peut etre un nom de file 
la version 1.5) ( ' paral 1 el ' par defaut) ou un objet special. Voir la section dediee aux files d'effets 
plus loin dans ce chapitre. 



Fonctions de rappel 

En plus des options a proprement parler, le troisieme argument du constructeur peut 
egalement etre utilise pour associer des fonctions de rappel sur I'effet (ce dont nous 
avons rarement besoin nous-meme, mais qui est fort utile pour la creation d'effets 
combines). Les noms disponibles sont beforeStart, beforeUpdate, afterUpdate et 
afterFinish, et parlent d'eux-memes. Les fonctions sont appelees avec l'objet 
Effect en argument. 

Qu'y a-t-il dans un objet d'effet ? 

Justement, qu'y a-t-il dans un objet Effect ? Les proprietes suivantes peuvent 
s'averer utiles. 



Tableau 7-3 Les proprietes utiles d'un objet Effect 



Propriete 


Description 


element 


L'element (nceud DOM) sur lequel s'applique I'effet. 


options 


Les options fournies. 
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Tableau 7-3 Les proprietes utiles d'un objet Effect 



Propriete Description 


currentFrame Le numero du frame courantdans revolution de I'effet. 


startOn 


Le moment de depart de I'effet (representation en millisecondes apres I'invocation). 


finishOn 


Le moment de fin de I'effet (idem). 


effects [] 


Pour un Effect . Paral 1 el , la liste des effets simultanes appliques. 



Et si on essayait quelques effets ? 

Mais bien sur ! D'ailleurs, nous n'aurons meme pas besoin d'une couche serveur pour 
nos tests, tout peut se faire cote client, en JavaScript, avec un doigt de XHTML 
quand meme... 

Creez un repertoire de travail, par exemple script.aculo.us, ainsi qu'un premier 
sous-repertoire opacity, et placez a i'interieur, en plus des fichiers prototype. js, 
scriptaculous. js et effects.js de script.aculo.us, les fichiers suivants, que nous 
adapterons pour nos essais ulterieurs. 

Listing 7-1 Notre index.html pour tester Effect.Opacity 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 
*• charset=iso-8859-15" /> 

<title>Test de Effect .Opacity</title> 

<link rel="stylesheet" type="text/css" href="tests. ess" /> 

<script type="text/javascript" src="prototype. js"x/script> 

<scri pt type=" text/ javascri pt" src="scri ptacul ous . j s?l oad=ef f ects"> 

</script> 

<script type="text/javascript" src="tests. js"x/script> 
</head> 
<body> 

<hl>Test de <code>Effect.Opacity</codex/hl> 

<p id="byebye">Cette page teste I'effet Effect.Opacity. Cliquez sur ce 
paragraphe pour avoir une demonstration .</p> 

</body> 
</html> 
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Listing 7-2 Notre tests.js pour tester Effect.Opacity 

function applyEffect(e) { 
Event .stop(e) ; 
new Effect.OpacityC'byebye' , { duration: 2, from: 1, to: }) ; 

} // applyEffect 

function bindTestElementsO { 

Event. observe('byebye' , 'click', applyEffect); 
} // bindTestElements 

Event. observe(window, 'load', bindTestElements) ; 

Listing 7-3 Notre feuille de styles, toute simple 

#byebye { 

font-size: large; 

width: 60ex; 

line-height: 1.5em; 

cursor: default; 
} 

Notez que nous avons, volontairement, ralenti l'effet en calant sa duree sur 
2 secondes au lieu d'une. Par ailleurs, puisqu'il s'agissait ici de reduire l'opacite, il a 
fallu inverser les valeurs par defaut des options from et to. Voyons le resultat en 
actionnant le bouton. 



Figure 7-1 

L'effet d'opacite en action 



Test de Effect.Opacity - Mozilla Firefox 
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Test de Effect.Opacity 

Cette page teste l'effet Rffect .Opacity. Clique?, sur ce 
paragraphe pour avoir une demonstration. 

Cette page teste l'effet Effect.Opacity. Cliquez sur ce 
paragraphe pour avoir une demonstration 



Terr 



etle page teste l'effel Effect. Opacity, Clique/ sui ce 
iragraphe pour avoir une demonstration. 



Termine 
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A present, copions notre repertoire sous le nom scale, et voyons Effect. Scale, qui 
dispose de nombreuses options. Nous allons brievement les passer en revue, puis en 
appliquer quelques-unes. 

Tableau 7-4 Les options specifiques a Effect.Scale 



Option Description 


scaleX 


Active le redimensionnement horizontal (true par defaut). 


scaleY 


Active le redimensionnement vertical (true par defaut). 


scaleContent 


Active le redimensionnement du contenu (true par defaut). 


scaleFromCenter 


Maintient la position du centre au fil du redimensionnement (f al se par defaut). 


scaleMode 


Trois possibility : 

- ' box ' (par defaut) : redimensionne la partie visible de I'element. 

- ' content ' : redimensionne la totalite de I'element, en prenant en compte les parties non 
visibles (qui necessitaient un defilement, etc.). 

- objet anonyme avec proprietes original Width et original Height, decrivant la 
taille de depart a utiliser. 


scaleFrom 


Indique le pourcentage de depart a utiliser (par rapport a la taille originale ; 100 par defaut). 



Que d'options ! Je vous accorde que la difference entre les modes box et content est 
un peu obscure... Notez par ailleurs que la construction exige un parametre 
(deuxieme argument), qui est le pourcentage final de redimensionnement (ainsi, 50 
aura reduit la taille par 2, 110 aura gagne 10 %). 

Adaptons done notre script pour realiser un agrandissement horizontal centre a 
150 %, qui ne touchera pas a la taille du contenu. Apres avoir ajuste le HTML pour 
qu'il indique le bon effet, il suffit de modifier appl yEf f ect comme suit : 

Listing 7-4 Un exemple de redimensionnement 

function appl yEf f ect (e) { 
Event .stop(e) ; 
new Ef feet. Seal e( ' byebye ' , 150, { 

duration: 2, scaleY: false, scaleContent: false, 
scaleFromCenter : true 

}); 

} // appl yEf feet 

Et nous allons ajuster la CSS pour que le resultat soit plus parlant. 
Listing 7-5 Notre CSS ajustee pour renforcer I'impact visuel de I'effet 

#byebye { 

margin: lem auto 0; 
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width: 30ex; 
font- size: 100%; 

line-height: 1.5em; 
text-align: center; 
cursor: default; 
background: #cd9; 



Et voici le resultat ! 



Figure 7-2 

L'effet Scale en action 



Test de Effect, Scale - Mozilla Firefox 
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Test de Effect. Scale 



Icrmin 



Termln 



Cette page teste l'effet 

Effect.Scale. Cliguez sur ce 

paragraphs puui" avoir une 

demonstration. 

CeLLe page LesLe reffeL ErfecLScale. 

Cliquez sur ce paragraphe pour avoir 

unedemonstration. 



CaLLe page LesLe 1'effeL EITecLSuale. Cliquez sur 
ce paragraphe pour avoir une demonstration. 



Termini 



II faut bien comprendre d'ou viennent les dimensions originates du paragraphe : la 
largeur est fixee par CSS (30ex), mais la hauteur est dynamique, simple fonction du 
nombre de lignes. C'est pourquoi, au fur et a mesure de l'elargissement du para- 
graphe, les lignes se font suffisamment longues pour etre moins nombreuses, et la 
hauteur diminue (puisque l'effet, lui, n'y touche pas explicitement, conformement a 
notre option seal eY: false). 

Cela ne se voit pas forcement a l'impression, mais en testant, vous remarquerez que 
le centre horizontal du paragraphe est fixe lors du redimensionnement : c'est le role 
de notre option scaleFromCenter. 
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Voyons a present un exemple de Highlight. Cet effet est simple, mais il est tees cou- 
ramment utilise pour mettre en exergue visuelle un element de la page qui a change 
ou vient d'apparaitre (une pratique incontournable pour ameliorer l'accessibilite en 
Ajax). L'effet a trois options specifiques. 

Tableau 7-5 Les options specifiques a Effect.Highlight 



Option Description 


startcolor 


Expression de couleur CSS indiquant la couleur de fond en debut d'effet. Par defaut, 
' #f f f f 99 ' , equivalent de ' #f f 9 ' , soit un jaune clair. 


endcolor 


Mime chose mais pour la couleur de fin. Par defaut la couleur de fond appliquee a 
I'element (propriete CSS background -col or), ou a defaut'#ffffff ', done 
blanc. 


restorecolor 


Definit la couleur de fond apres l'effet. Indefinie par defaut, elle amene script.aculo.us 
a tenter de recuperer la couleur de fond courante de I'element (celle avant que l'effet 
ne demarre), ce qui n'est garanti pour tous les navigateurs que si celle-ci est indefinie 
ou exprimee avec la syntaxe rgb( rouge, vert, bleu). 



Je vous encourage a systematiquement utiliser le new devant le nom de l'effet, mais 
dans ce cas precis, e'est absolument obligatoire : l'effet ne fonctionnera tout simple- 
ment pas sinon. 

Copiez votre repertoire precedent dans un nouveau repertoire nomme highlight, 
ajustez a nouveau le HTML pour refleter l'effet, puis modifiez la fonction 
appl yEf f ect du script comme suit. 

Listing 7-6 Un exemple de mise en exergue (highlight) 



function appl yEf f ect (e) { 
Event .stop(e) ; 
new Effect.Highlight('byebye' , { duration: 

} // appl yEf feet 



2 }); 



La couleur de fond predefinie de notre paragraphe nous permet de voir ici la restau- 
ration de la couleur de fond originale : on a un fondu du jaune clair vers le vert clair, 
e'est impeccable ! 

Une impression noir et blanc ne donnerait rien de bien utile, aussi pour cette fois, on 
se passera d'une figure... 

Enfin, nous allons terminer en beaute avec un exemple un peu plus avance : la com- 
binaison d'effets synchronises sur un meme element. On realise ceci avec 
Effect . Paral 1 el , et de nombreux effets combines (par exemple Puff, DropOut, Crow 
et Shrink) s'en servent. 
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Nous allons combiner un changement d'opacite et un retrecissement, ce qui n'est pas 
sans rappeler Effect. Puff. 

Copiez votre repertoire dans un nouveau repertoire parallel, ajustez le HTML et 
modifiez apply Effect comme suit. 

Listing 7-7 Un exemple d'execution en parallele d'effets sur un meme element 

function applyEffect(e) { 
Event .stop(e) ; 
new Effect.Parallel([ 

new Effect.OpacityC'byebye' , { sync: true, from: 1, to: 0.33 }) , 
new Ef f ec t . Seal e ( ' byebye ' , 40 , 

{ sync: true, scaleFromCenter : true }) 
] , { duration: 2 }) ; 
} // applyEffect 

Faites bien attention a la syntaxe ! Le constructeur prend deux arguments : un 
tableau d'effets et les options. Chaque effet doit par ailleurs activer son option sync, 
comme indique plus haut. On a ici une reduction d'opacite jusqu'a 33 %, combinee a 
une reduction de taille jusqu'a 40 %. 

L execution est impressionnante : 



Figure 7-3 

Notre effet combine 
personnel ! 
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A titre de bonus, voici un exemple encore plus avance, tres proche des effets com- 
bines officiels, qui montre comment enchainer un masquage de l'element concerne 
par ces effets (en supposant qu'ils s'appliquent bien tous au meme) une fois 1' execu- 
tion parallele terminee, a l'aide d'une fonction de rappel. 

Listing 7-8 Ajout d'une fonction de rappel pour masquer finalement l'element 

function applyEffect(e) { 
Event .stop(e) ; 
new Effect. Parallel ([ 

new Effect. Opacity ('byebye' , { sync: true, from: 1, to: 0.33 }) , 
new Ef feet. Seal e(' byebye' , 40, 

{ sync: true, scaleFromCenter : true }) 

], { 

duration: 2, 

afterFinish: function(effect) { 

El ement. hi de(ef feet .effects [0] .element) ; 
} 

}); 

} // apply Effect 

Souvenez-vous : les fonctions de rappel recoivent l'effet conteneur (done notre 
Effect. Parallel), lequel recense ses effets synchronises dans une propriete tableau 
effects. Puisque nous savons ici que tous les effets synchronises referencent le 
meme element, on prend le premier, et on passe sa propriete element a la fonction 
Prototype El ement. hide. Etvoila ! 

Les effets combines 

Les effets combines sont constitues soit d'effets noyau specialement parametres, soit 
d'executions paralleles de tels effets (realisees avec Effect. Parallel), soit de 
sequences de tels effets (realisees a l'aide de fonctions de rappel). 

Attention, certains effets n'auront pas forcement le resultat desire sur votre naviga- 
teur. Les deux principales causes sont l'absence de prise en charge de la propriete 
CSS opacity (affecte Appear, Fade et Pulsate), par exemple sur Konqueror (a 
l'heure ouj'ecris ces lignes, en version 3.5.2) etla configuration d'une taille minimale 
pour les polices de caracteres, qui va empecher la reduction extreme de textes (ce qui 
affecte notamment Shrink et Scale). Soyez avertis ! 

A present, dressons une liste rapide des effets combines. Au passage, notez que vous 
trouverez une page faisant la demonstration de tous ces effets ici : 

http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo. 
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Effet 

Effect .Appear 



Tableau 7-6 Les effets combines de script.aculo.us 

Description 

Affiche I'element en supprimant I'eventuel display: none deson attribut style, et en 
faisant graduellement passer son opacite de % a 1 00 %. Hormis I'aspect di spl ay, equi- 
valent a un Opacity. 



Effect. Fade 
Effect. Puff 



Effect.BlindDown 



Effect.BlindUp 



Symetrique de Appear : ramene I'opacite vers % et ajoute un di spl ay : none au 
style. 

Donne I'illusion que I'element part en fumee (melange d'un Fade et d'un Crow en direction 
center) ! On preferera I'appliquer sur des elements positionnes (en absolu ou relatif), pour 
eviter les decalages subis a gauche au declenchement de I'effet. 

Affiche I'element de haut en bas, sans modifier sa position dans la page ou sa presence. 

Symetrique de Bl i ndDown, mais de bas en haut. 



Effect . Swi tchOf f Simule I'extinction d'une ancienne television : un clignotement suivi d'un ramassement vers 
la ligne centrale. L'element disparait en fin d'effet. 

Effect . SI i deDown Similaire a Bl i ndDown, si ce n'est que le contenu de I'element suit le glissement, comme 
s'il etait fixe sur un volet qu'on baissait. A tendance a clignoter quand le contenu est riche... 

Effect . SI i deUp Symetrique a SI i deDown, mais de bas en haut. Meme remarque. 



Effect . DropOut En plus d'un Fade, I'element disparait en « tombant ». II part en quelque sorte aux oubliettes. 



Effect. Shake 
Effect. Pulsate 



Deplace I'element alternativement de droite a gauche. 



Fait « pulser » I'element, en 5 cycles Appear/Fade (sans finir par display: none, en 
revanche). 



Effect. Squish 



Effect. Fold 
Effect .Crow 



Ecrase I'element vers son coin superieur gauche, et le fait finalement disparaitre. 
Similaire a Squish, mais reduitd'abord la hauteur, puis la largeur. 



Effect. Shrink 
Effect .toggle 



Amene I'element d'une taille nulle a sa taille courante, en suivant une option di recti on 
de grossissement (top-left, top-right, bottom-left, bottom-right, ou la 
valeur par defaut : center). 



Inverse de Crow : reduit I'element jusqu'a disparition. Meme option specifique. 



II ne s'agit pas tant d'un effet que d'une methode de bascule d'etat par effets (voir section 
suivante). 



Effect.toggle 

Cette fonction permet de faire basculer l'etat d'un element, de visible a invisible et 
inversement. Elle a un premier argument obligatoire, qui est bien sur I'element (ou 
son ID). Le deuxieme argument est optionnel, et indique la famille d'effets a utiliser 
pour assurer la transition d'un etat a l'autre. Trois valeurs sont possibles : 

• ' appear ' , valeur par defaut, utilisera Appear et Fade. 

• ' bl i nd ' utilisera Bl i ndDown et Bl i ndUp. 

• ' si i de ' utilisera SI i deDown et SI i deUp. 
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De cette facon, nous n'avons pas a tester manuellement l'etat affiche (propriete di spl ay) 
de l'element dans nos scripts. Notez qu'il n'est pas necessaire d'utiliser la meme famille 
tout du long : un Effect, toggle (element, 'blind') affichera sans probleme un ele- 
ment prealablement cache par un Effect . toggl e (el ement) , par exemple. 

Quelques precisions importantes 

Avant que vous ne vous jetiez sur vos tests personnels, permettez-moi de resumer les 
principaux points techniques a surveiller en manipulant ces effets : 

• On ne le repetera jamais assez : pour masquer un element d'entree de jeu, il faut 
enfreindre legerement la separation du contenu et de la forme en definissant une 
propriete display: none dans son attribut style, et non dans une regie CSS. 
Sans quoi, script.aculo.us ne pourra pas l'afficher a nouveau. 

• Pour les effets combines comme pour les effets noyau, assurez-vous toujours 
d'utiliser new devant le nom de l'effet, afin d'eviter les surprises facheuses. 

• La plupart des effets fonctionnent principalement sur des elements de type bloc 
(voir l'annexe B pour plus de details sur cette notion), a l'exception des elements 
relatifs aux tables (par exemple table, tr, td, thead, caption), dont les valeurs 
pour la propriete display sont particulieres et d'une gestion complexe. 

• SI i deDown et SI i deUp ont quelques exigences sur l'aspect de votre balisage, et des 
besoins supplementaires si vous les appliquez a des elements en positionnement 
absolu dans MSIE. Voyez la documentation pour les details. 

Vous trouverez une documentation pour ces effets sur le wild documentaire de 
script.aculo.us : http://wiki.script.aculo.us/scriptaculous/show/CombinationEffects. 

Des commentaires qui font de l'effet 

A titre de demonstration, nous allons reprendre notre dernier exemple de saisie de 
commentaires, que nous avons adapte au debut de ce chapitre, pour y ajouter une 
petite dose d'effets qui ressemblera au comportement d'outils de blog recents, par 
exemple Typo. 

II va nous falloir proceder avec quelques precautions car nous allons changer de ver- 
sion de Prototype. Commencez par recopier votre repertoire ajax_updater dans un 
repertoire fancy_comments. Copiez ensuite dans le sous-repertoire docroot les 
fichiers prototype, js, scriptaculous. js et effects, js d'un des repertoires de test 
d'effet, par exemple parallel . 

Commencons par ajuster notre HTML en ajoutant dans le head le chargement de 
script.aculo.us, et en ajoutant un fragment pour l'affichage du nombre de commentaires. 
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Listing 7-9 Chargement de script.aculo.us et affichage du nombre de commentaires 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 
xml :lang="f r-FR"> 

<head> 

<meta http-equiv="Content-Type" content="text/html ; 

*• charset=iso-8859-15" /> 
<title>Des commentaires qui font de l'effet !</title> 
<link rel="stylesheet" type="text/css" href="client .css"x/script> 
<script type=" text/ javascript" src=" prototype. js"x/script> 
<scri pt type=" text/ javascri pt" src="scri ptacul ous . j s?l oad=ef f ects"> 
</script> 
<script type=" text/ javascript" src=" client. js"x/script> 

</head> 

<body> 



</form> 

<p>Il y a <span id="commentCount">0 commentai re</span> . </p> 

<div id="comments"x/div> 

</body> 
</html> 

Voici les modifications que nous souhaitons apporter : 

• Nous affichons desormais le nombre de commentaires, comme vous avez pu le 
voir dans le listing ci-dessus. A chaque ajout, ce nombre clignotera, pour attirer 
l'attention sur la modification. 

• Le nouveau commentaire apparaitra parallelement a l'aide d'un effet Bl i ndDown 
(qui a l'avantage, par rapport a SlideDown, de ne rien exiger de particulier quant 
au XHTML de l'element). En revanche, afin d'eviter un clignotement du a son 
bref affichage suite a l'insertion dans le DOM, on va modifier notre modele, 
commentaire. rhtml, pour utiliser un attribut style masquant d'entree de jeu le 
bloc du commentaire. 

Voici le nouveau modele. 

Listing 7-10 La version ajustee (extrait cible) du modele de commentaire 
<div class="comment" style="di splay: none;"> 

</div> 
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Et la nouvelle version de notre fonction switchToAJAX ! 
Listing 7-11 L'ajout de commentaire, facon script.aculo.us 

function switchToAJAX(e) { 

new Ajax.Updater('comments' , '/add_comment' , 
{ 

postBody: data, 

insertion: Insertion .Bottom, 

onComplete: functionO { 

var comments = $$(' #comments .comment'); 
var commentCount = comments. length; 
var lastComment = comments. 1 ast() ; 
var text = commentCount + ' commentaire'; 
if (commentCount > 1) 

text += ' s ' ; 
Element. update ('commentCount' , text); 
new Effect.Parallel([ 

new Ef fect.PulsateC commentCount ' , { sync: true }) , 
new Effect .Bli ndDown (lastComment , { sync: true }) 
] , { duration: 2 }) ; 
} 

}); 

} // switchToAJAX 

Comme quoi, il y a des cas ou onComplete est utile pour un Ajax.Updater... Notez 
ici la fonction $$ de Prototype 1.5, qui permet d'interpreter un selecteur CSS et ren- 
voie un tableau des elements correspondants. Meme si, a l'heure actuelle, le 
selecteur > (element fils) n'est pas encore reconnu, cela reste tres utile pour recuperer 
dynamiquement notre nombre de commentaires ! Si la syntaxe de notre selecteur 
CSS vous intrigue, faites done un tour du cote de 1' annexe B. 

En esperant que cela donne quelque chose une fois imprime (et dans le cas contraire, 
qu'attendez-vous pour tester ?), la figure 7-4 vous donne un apercu du resultat : 

Files d'effets 

Par defaut, lorsqu'on cree plusieurs effets, il s'executent en parallele. Vous allez sure- 
ment vous etonner, alors, qu'il existe un Effect . Paral 1 el . Celui-ci est pourtant tres 
utile, puisqu'il assure que les effets qu'il enrobe seront synchronises : memes 
moments de demarrage et de fin d'execution. Lancer plusieurs effets sans passer par 
lui les demarre un par un et les execute a leur rythme : s'ils s'executent en parallele, ils 
ne sont pas pour autant synchrones. Done oui, e'est vrai, Effect. Parallel devrait 
plutot se nommer Effect. Synchronized. 
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Figure 7-4 

L'ajout de commentaire 
avec effets 
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L' execution simultanee est parfois problematique 

Reste que cette execution parallele, qui est active par defaut, peut poser probleme : 
certains effets vont entrer en conflit, et probablement aboutir a un aspect « casse » du 
pauvre element victime. Imaginez par exemple le code suivant : 

new Effect.BlindUp('accountlnfo') ; 
new Effect . Bl i ndDown ( ' accountlnf o ' ) ; 

La ou vous vouliez visiblement enchainer les effets, leur execution simultanee donne 
un resultat catastrophique (clignotement et, le plus souvent, element invisible ou 
parti ellement visible au bout du compte). 
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Les files, ou comment enchafner les effets 

Les files sont justement la pour permettre d'ordonner les effets. Dans script.aculo.us, 
on trouve un referentiel global de files nomme Effect. Queues, qui se comporte 
comme un tableau associatif d'objets Effect. ScopedQueue. Chaque file est nommee. 
Par defaut, il en existe une seule, nommee 'global', qui est d'ailleurs accessible 
directement via la reference globale Effect. Queue. C'est dans cette file globale que 
vos effets sont ajoutes par defaut. 

Quand un effet est ajoute a une file, il faut preciser notamment si on souhaite l'exe- 
cuter classiquement (sans planification particuliere), ou le placer en debut ou en fin 
de file. Ce detail est fourni par une option commune a tous les effets, que nous avons 
deja evoquee : queue. Lorsque cette option manque, l'effet est ajoute pour execution 
simultanee dans la file globale. Sinon, elle peut valoir 'front' ou 'end' (les noms 
parlent d'eux-memes), ou etre un objet anonyme precisant une file particuliere (nous 
verrons cela dans un moment). 

Ce qu'il faut bien comprendre, c'est le moment auquel un effet est execute : des 
qu'une file a au moins un effet, elle va examiner regulierement (dans la version 
actuelle, toutes les 40 ms, soit 25 fois par seconde, ce qui est largement suffisant) ses 
effets pour lancer ceux dont le moment de demarrage est arrive, faire evoluer ceux 
dont le demarrage est passe, et retirer ceux qui auront termine. Cette notion de 
moment de demarrage (propriete startOn de l'effet, deja evoquee) est done critique. 

Par defaut, un effet demarre immediatement (des son premier examen par la file, au 
pire 40 ms apres sa definition), ou apres une attente de delay millisecondes, s'il est 
pourvu d'une option del ay. 

Mais l'utilisation d'une position explicite d'ajout dans la file modifie les moments de 
demarrage des effets de la file : 

• pas d'information de position : ajout sans modifier quelque moment d'execution 
que ce soit. 

• ' front' : ajout en debut de file, et decalage des demarrages de tous les effets sui- 
vants (les effets qui avaient demarre tres recemment risquent d'etre suspendus !). 

• ' end ' : ajout en fin de file, le moment de demarrage de l'effet etant ajuste pour 
pouvoir executer tous les autres avant. 

II faut se mefier de files trop longues, par exemple en definissant une dizaine d'effets suc- 
cessivement pour la meme file (ce qui serait probablement bien trop lourd visuellement 
en termes d'ergonomie, de toutes facons). En effet, il ne faut pas oublier qu'au bout de 
40 ms maximum, la file va commencer a traiter ses effets. Ajouter un effet en position 
'front' plus de 40 ms apres l'insertion du premier effet dans la file peut donner des 
resultats inattendus... Si vous avez besoin de definir plus de 2 ou 3 effets dans une meme 
sequence, prenez soin de les definir dans le bon ordre, en position ' end ' . 
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Exemple d'enchatnement 

Imaginons la sequence de definitions suivantes, en supposant que son execution 
prendra moins de 40 ms : 

new Effect. High"light('userPacT , { duration: 1.5 }) ; 
new Ef feet. Seal e( ' userPad ' , { queue: 'end' }) ; 
new Effect. Appear('userPad' , { queue: 'front' }) ; 

On obtient la file suivante : 

1 Appear prevu pour execution immediate, duree par defaut Is. 

2 Highlight prevu pour execution a 1 s (apres la fin de Appear). 

3 Seal e prevu pour execution a 2,5 s (apres la fin de Hi ghl i ght, de duree 1,5 s). 

Utiliser plusieurs files 

Ce nest deja pas mal, mais cela ne suffit pas toujours. En effet, on peut avoir plu- 
sieurs sequences d'effets, pour plusieurs portions de la page. Prenons un exemple, un 
peu force il est vrai : sur un site marchand, suite a l'ajout d'un achat dans le panier 
depuis une page de details et au retour sur le catalogue, on pourrait avoir la sequence 
suivante : 

1 Affichage et High! i ght d'un message de confirmation en haut de page. 

2 Trois secondes apres la fin du Highlight, Fade de la confirmation. 

Mais s'il s'agit du premier achat, on pourrait vouloir executer, parallelement, la 
sequence suivante : 

1 Bl i ndDown du resume de panier dans la barre laterale. 

2 Une fois le Bli ndDown termine, Appear du bouton de validation de commande 
sous le resume. 

Tout ceci a Fair attrayant, mais comment nous y prendre pour avoir deux files 
distinctes ? Rien de plus simple : il suffit d'en nommer au moins une. Pour pouvoir 
nommer la file a laquelle l'effet doit s'aj outer, il faut changer la nature de notre argument 
queue : au lieu d'une String, il va s'agir d'un objet anonyme avec une propriete scope 
(le nom de la file) et, si besoin est, une propriete position (toujours ' front ' ou ' end ' ). 

Void rimplementation des besoins decrits ci-dessus. 
Listing 7-12 Une definition avancee : deux files d'effets 

// lere file 

new Effect. Highlight ('notice' , { queue: { scope: 'notice' } }) ; 

new Effect. Fade (' notice' , { 

delay: 3, queue: { scope: 'notice', position: 'end' } 

}); 
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II 2 erne file 

new Effect.B"lindDown('cart' , { queue: { scope: 'cart' } }) ; 

new Effect. Appear('btnOrder' , { 

queue: { scope: 'cart', position: 'end' } 

}); 

Et voila, ce n'etait pas si complique ! 

Pour conclure, parlons de la surcharge de file. Lorsqu'un utilisateur sollicite trop 
l'interface (en cliquant a repetition sur un bouton, par exemple), on peut aboutir a un 
tel enchainement d'effets qu'ils continuent inutilement leur execution plusieurs 
secondes apres que l'utilisateur... se soit calme, dirons-nous. C'est souvent inutile. 

Lorsque cela a du sens ergonomiquement, vous veillerez done a poser une limite au 
nombre d'effets qui peuvent deja se trouver dans la file avant d'inserer celui que vous 
etes en train de definir. C'est tout simple : il suffit d'ajouter une propriete limit a la 
definition de file, par exemple : 

new Effect.BlindDown('companyInfo' , { 

queue: { scope: 'company', position: 'end', limit: 2 } 

}); 



Glisser-deplacer 



A present que nous avons fait le tour des effets, il est temps de se pencher sur une 
autre fonctionnalite majeure de script. aculo.us : le glisser-deplacer. Ceux d'entre vous 
qui ont deja tente d'ecrire leur propre gestion de glisser-deplacer en JavaScript por- 
table ont goute l'enfer. Avec script, aculo.us, plus de souci, une gestion solide est enfin 
disponible ! 

La gestion du glisser-deplacer dans script.aculo.us repose sur deux classes, que nous 
allons voir separement : Draggable et Droppables. Ces classes sont fournies par le 
module dragdrop. js, qu'il faudra charger. Le plus simple pour ce faire est de modi- 
fier notre appel a script.aculo.us : 

<script type="text/javascript" 

s rc="scri ptacul ous . j s?l oad=ef fets , dragdrop"x/scri pt> 

Commencons par examiner les possibilites de glissement. 

Faire glisser un element avec Draggable 

Pour pouvoir faire glisser un element, il suffit de creer un objet Draggable base sur 
1' element, au chargement de la page. Le listing ci-apres propose un exemple. 
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Listing 7-13 Alteration d'un element au chargement pour qu'il puisse glisser 

function initDraggablesO { 

new Draggable('myWizzyDiv') ; 

} // initDraggables 

Event. observe(window, 'load', initDraggables, false); 

Comme vous pouvez le voir, c'est extremement simple. Precisons toutefois qu'on 
n'utilisera pas comme elements des champs de formulaire, en tout cas pas directe- 
ment (on utilisera par exemple leur paragraphe conteneur), en raison de problemes 
sur certains navigateurs. 

C'est done simple, mais si la fonctionnalite s'arretait la, nous buterions rapidement 
sur ses limitations. On pourrait par exemple vouloir : 

• limiter la zone au sein de laquelle 1' element peut etre deplace ; 

• demander a l'element de se deplacer par paliers (ce qu'on appelle un snap) d'un 
certain nombre de pixels plutot que pixel par pixel ; 

• demander a l'element de revenir a sa position initiale une fois lache ; 

• alterer les effets visuels declenches a la prise et au relachement ; 

• modifier la position Z de l'element pour qu'il soit masque par certains autres 
(rarement utile, ceci dit) ; 

• preferer limiter la zone de prise a un element donne plutot qua toute la zone de 
l'element concerne (pour realiser une poignee, par exemple). 

On le voit, les exigences concretes peuvent etre tres variees sur de veritables projets. 
Heureusement pour nous, Draggable est a meme de repondre a tous ces besoins (et 
meme plus) ! II utilise pour cela des options, passees, de facon classique, comme pro- 
prietes d'un objet anonyme fourni en deuxieme argument. Les proprietes disponibles 
sont les suivantes. 

Tableau 7-7 Proprietes prises en charge par Draggable 



Option Description 


zindex 


Position Z de l'element (1 000 par defaut, ce qui assure a priori que l'element est toujours 
visible). 


revert 


Demande a l'element d'executer revertef feet une fois relache (f al se par defaut). 
On peut aussi simplifier en precisant directement la fonction a invoquer, et laisser 
revertef feet tranquille. 


constraint 


Peut valoir ' ve rti cal ' ou ' ho ri zontal ' , ce qui limite la direction autorisee pour 
le glissement. Indefini par defaut. 


del ay Temps en millisecondes pendant lequel le bouton de la souris doit etre enfonce avant que 
le glisser-deplacer ne puisse avoir lieu. Vaut zero (desactive) par defaut. 
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Tableau 7-7 Proprietes prises en charge par Draggable (suite) 





snap 


Gere I'ajustement de la position au fil du glissement. Peut prendre de nombreuses formes : 

- fal se (valeur par defaut) : pas d'ajustement ou de limitation. 

- nombre entier : taille du snap en pixels, par exemple 10 pour se deplacer par paliers de 
10 pixels. 

- Tableau de deux nombres entiers : differenciation horizontale et verticale, par exemple 
[10 , 20] utilisera un palier horizontal de 1 et un palier vertical de 20. 

- Fonction : prend la position prevue en arguments (X, Y) et renvoie un tableau avec la 
position ajustee [ax , ay] . Permet d'assurer un snap uniquement a certains endroits, 
par exemple au bord de certains elements, et de limiter la zone de glissement autorisee ! 


handle 


Permet de definir un element servant de poignee {handle) pour le glissement. Par defaut 
vaut null, de sorte que toute la surface de I'element est utilisable pour demarrer le glis- 
sement. Peut prendre plusieurs autres valeurs : 

- nom de classe CSS : le premier element fils ayant cette classe servira de poignee 3 ; 

- ID d'element ou element directement : designe I'element devant servir de poignee. 
Une utilisation classique consiste a limiter le declenchement du glissement a une «barre 
de titre» pour un element, generalement representee sous forme d'un element di v ou de 
titre (hx) fils. 


ghosting 


Si actif, deplace un clone de I'objet plutot que I'objet lui-meme, jusqu'au depot. Vaut 
fal se par defaut. 


starteffect 


Fonction appelee au demarrage du glissement. Par defaut, sauvegarde I'opacite actuelle 
de I'element puis I'amene a 70 % a I'aide d'un Effect . Opaci ty. Recoit I'element en 
argument. 


endeffect 


Fonction appelee au relachement. Par defaut, restaure I'opacite sauvegardee (100 % si 
elle n'a pas ete determinee au demarrage) a I'aide d'un Effect . Opaci ty. Recoit I'ele- 
ment en argument. 


reverteffect Fonction appelee au relachement, apres endeffect, si la propriete revert est a 

true. Par defaut, ramene I'element a sa position d'origine, en un temps proportionnel a 
la distance de glissement, a I'aide d'un Effect . Move. Recoit trois arguments : 1'ele- 
ment et les composantes verticale et horizontal du glissement. 


scroll Indiquesi le glissement doit, lorsqu'il atteint la limite d'affichage d'un element conteneur, 
declencher le defilement de cet affichage pour pouvoir continuer a glisser. Vaut fal se 
par defaut, mais peut referencer un objet conteneur par son ID ou directement, par exem- 
ple I'objet global wi ndow. Du coup, en atteignant le bord de la page, celle-ci va se mettre 
a defiler (meme si elle n'en avait pas besoin, car tout son contenu etait visible !) pour per- 
mettre de prolonger le defilement. 


scroll Sensitivity 


Niveau de proximite aux bords du conteneur pour declenchement du defilement. En 
pixels ; vaut 20 par defaut. 


scrollSpeed 


Vitesse de defilement, en pixels par progression du glissement. Vaut 15 par defaut. 



a. Cette possibility semble defectueuse dans la version 1 .6.2.. 
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Notez que les proprietes de gestion du defilement sont encore assez experimentales, 
et ne fonctionnent pas forcement partout. Ceci dit, elles correspondent a un type 
d'utilisation assez limite. 

Eh bien, que d'options ! Realisons un petit exemple pour nous y retrouver. 

Commencez par copier votre repertoire opacity dans un nouveau repertoire 
draggable. Ajoutez-y le fichier dragdrop. js de la bibliotheque. Nous allons ensuite 
modifier la page HTML pour preparer notre exemple. 

Listing 7-14 Notre page HTML avec un pave deplacable 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

*• charset=iso-8859-15" /> 
<title>Test de Draggable</title> 

<link rel="stylesheet" type="text/css" href="tests. ess" /> 
<script type=" text/ javascript" src=" prototype. js"x/script> 
<scri pt type="text/javascri pt" 

•» src="scriptaculous . js?load=effects,dragdrop"x/script> 
<script type="text/javascript" src="tests. js"x/script> 
</head> 
<body> 

<hl>Test de <code>Draggable</codex/hl> 

<div id="wizzy"> 

<div id="wizzy-menubar"x/div> 

<div class="contents">Faites-moi glisser  !</div> 
</div> 

</body> 
</html> 

La feuille de styles, tests . ess, est assez simple. 

Listing 7-15 La feuille de styles pour notre exemple 

#wizzy { 

width: 2 5ex; 
border: lpx solid navy; 
background: #ddf; 
color: blue; 
text-align: center; 
font-size: large; 
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#wizzy-menubar { 

height: 0.5em; 

background: navy; 

cursor: move; /* indice visuel pratique */ 
} 

.contents { 

padding: lem; 
} 

Nous obtenons 1' aspect suivant. 



Figure 7-5 

Notre page avant qu'on fasse 
glisser le bloc 



Test de Draggable - Mozilla Firefox 
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Test de Draggable 



FaiLes-moi ylissei 



I ermine 



Notez la partie haute du pave, sa « barre de titre » en quelque sorte, qui va servir de 
seule zone possible pour declencher le glissement, comme on le voit dans le script ci- 
dessous, tests, js : 

Listing 7-16 Notre script de tests 

MAX = 400; 

function initDraggablesO { 
new Draggable('wizzy' , { 

revert: true, handle: 'wizzy-menubar ' , 
snap: function(x, y) { 

return [ [ x, MAX ].minO, [ y, MAX ].minO ]; 
} 

}); 

} // initDraggables 

Event. observe(window, 'load', initDraggables) ; 
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Pour cet exemple, nous utilisons : 

• revert, pour demander a 1'element de revenir a sa position initiale une fois relache. 

• handle, pour preciser l'ID de 1'element qui servira de zone de declenchement. 
Cliquer sur le corps du pave ne servira done a rien, comme pour la plupart des 
systemes de fenetrage par exemple. 

• snap, d'une facon avancee : nous definissons notre propre fonction de controle, qui 
limitera les deplacements a la position (400, 400), done des limites droite et basse. 

Le pave beneficie des comportements par defaut pour les effets de demarrage et 
d'arret (ajustement de l'opacite a 70 %), ainsi que pour le relachement (retour a la 
position de depart). 

Chargez la page et amusez-vous a deplacer le bloc ! 



Figure 7-6 

Notre pave en cours 
de deplacement 



Test de Draggable - Mozilla Firefox 
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Faites-moi glisser ! 



Terrnine 



Desactiver la possibilite de faire glisser un element 

Si vous souhaitez empecher, temporairement ou definitivement, un element de glisser, 
il suffit de conserver une reference sur le Draggable que vous creez pour lui, et de la 
passer par la suite a Draggables.unregister (attention au «s»: e'est un pluriel). 
Vous pourrez reactiver le glissement plus tard en appelant Draggables . register (ce 
qui avait ete fait automatiquement quand vous aviez cree le Draggable). 

Reagir aux etapes des glissements 

II est possible d'inscrire des observateurs aupres de Draggables, a l'aide de sa methode 
addObserver (et bien sur, on peut se desinscrire avec removeObserver). Chaque 
observateur peut implementer jusqu'a trois methodes correspondant aux trois catego- 
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ries d'evenement dans un glissement : onStart, onDrag et onEnd. Seule onDrag peut 
etre appelee plusieurs fois (chaque fois que le glissement evolue dans l'espace). 

Les trois methodes acceptent trois arguments : 

1 Le nom de l'evenement ('onStart', 'onDrag' ou 'onEnd'), ce qui permet par 
exemple d'utiliser une meme methode pour plusieurs evenements. 

2 L'objet Draggable concerne (puisqu'on enregistre les observateurs au niveau glo- 
bal, avec Draggables .addObserver). 

3 L'objet evenement, manipulable avec le Event de Prototype. 
Void un exemple simple, utilisant l'objet global console de Firebug : 

Draggables. addObserver ({ 

onStart: function(eventName, draggable) { 

console. log(draggable. id + ' : ' + eventName) ; 

}, 

onEnd: onStart 

}); 
Gerer le depot d'un element avec Droppables 

Faire glisser, c'est bien, mais si c'est pour ne pas deposer dans un endroit precis, fa ne 
sert qua rearranger la page (ce qui n'est deja pas si mal). 

II est bien entendu possible, avec script.aculo.us, de definir des elements de la page 
comme etant des zones de depot (ce que la bibliotheque appelle des droppables). 

Chaque zone peut preciser certaines conditions d'acceptation pour un depot (par 
exemple, « uniquement les elements ayant la classe X » ou « uniquement ceux issus 
du conteneur Y »), reagir au survol d'un candidat valide en cours de deplacement, et 
bien sur, reagir au depot a proprement parler. 

II ne s'agit pas ici de creer un objet d'enrobage, mais simplement d'inscrire ou de 
desinscrire notre element dans le referentiel global. La ou on avait Draggable, 
Draggables . register et Draggables .unregister, on a ici juste Droppables. add et 
Droppables . remove. 

L'ajout prend en charge plusieurs options. Toutes, sauf onDrop, sont optionnelles. 

Tableau 7-8 Options prises en charge pour I'inscription d'une zone de depot 

Option Description 

accept Nom ou tableau de noms de classes CSS, qui etablit un filtre : seuls les elements disposant d'au 

moins une des classes specifies auront le droit d'etre deposes. 

contai nment Reference ou tableau de references d'elements (ID ou references directes), qui etablit un filtre lui 
aussi : seuls les elements contenus dans un des conteneurs specifies auront le droit d'etre deposes. 
Cumulatif avec accept. 
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Tableau 7-8 Options prises en charge pour I'inscription d'une zone de depot (suite) 

Option Description 

hove rcl ass Classe CSS ajouteea la zone de depot lorsqu'un element acceptable est en train de glisser dessus. 
Pratique pour indiquer que le depot est autorise. 



onDrop Seule option obligatoire, doit fournir une fonction de gestion du depot, qui va probablement synchro- 

niser la couche serveur via Ajax et recuperer un ajustement de la page en reponse. 



II existe en realite quelques options supplementaires, mais qui sont principalement 
utilisees en interne par Sortables, le mecanisme de tri dynamique d'elements par 
glisser-deplacer que nous verrons a la prochaine section. 

Un exemple sympathique de glisser-deposer 

A titre d'exemple, nous allons realiser un equivalent de la demonstration de panier 
presente sur le site de script, aculo.us, avec une couche serveur qui composera a 
chaque manipulation le contenu de la zone « panier » (de la a aj outer l'information 
dans une gestion de sessions, il n'y aurait qu'un pas). 

Le principe est simple : nous avons quelques elements a vendre dans notre magasin, a 
savoir des tasses et des tee-shirts (le parfait magasin en ligne pour geeks). Pour placer 
un element dans le panier, nous allons simplement le faire glisser. Ajouter plusieurs 
fois le meme produit fera l'objet d'une gestion de quantite par type de produit. Pour 
retirer un produit, il suffira de le faire glisser vers une poubelle a cote du panier. 

Copiez done votre repertoire draggable dans un nouveau repertoire fancy_cart/ 
doc root. Vous pourrez trouver les images de cet exemple dans 1' archive des codes 
source disponible sur le site des editions Eyrolles, et les deposer dans le repertoire. 
Commencons par modifier notre HTML. 



Listing 7-17 La page HTML pour notre gestion de panier 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

* charset=iso-8859-15" /> 
<title>Un sympathique panier</title> 

<link rel="stylesheet" type="text/css" href="tests. ess" /> 
<script type=" text/ javascript" src=" prototype. js"x/script> 
<scri pt type="text/javascri pt" 

•» src="scriptaculous . js?load=effects ,dragdrop"x/script> 
<script type="text/javascript" src="tests. js"x/script> 
</head> 
<body> 
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<hl>Un sympathique panier</hl> 

<div id="products"> 

<img src="productl.png" id="product_l" alt="Mug" class="product" /> 
<img src="product2.png" id="product_2" alt="T-shirt" class="product" /> 

</div> 

<h2>Votre panier  :</h2> 

<div id="cart" class="cart"> 

<div id="items">Votre panier est vide.</div> 
<div id="cartFooter"> 

<p id="wastebin"><img src="wastebin.png" alt="Poubelle" /></p> 
<p id="indicator" style="di splay: none"> 
<img src="spinner .gif" /> 
Mise a jour… 

</p> 
</div> 
</div> 

</body> 
</html> 

La feuille de styles est plus longue que d'habitude mais reste assez simple (et comme 
toujours, dans le doute, commencez par l'annexe B). 

Listing 7-18 La feuille de styles pour notre gestion de panier 

body { 

background: white; 
} 

#products { 

margin-bottom: 20px; 

height: 120px; 
} 

#cart { 

margin-top: lOpx; 
} 

#cartFooter { 

position: relative; 
} 

#indicator { 

position: absolute; 
left: 90px; 
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top: 0; 
height: 16px; 
font-family: sans-serif; 
font-size: small ; 
color: gray; 
} 

#indicator img { 

vertical -align: middle; 
} 

#i terns { 

width: 500px; 

height: 96px; 

border: lpx solid orange; 

padding: lex; 

font-family: sans-serif; 

color: gray; 
} 

#i terns .active { 

background: #fec; 
} 

#wastebin { 

margin: 0; 

width: 64px; 

padding: lex; 

border: 2px dotted white; /* MSIE ignore 'transparent' */ 
} 

#wastebin .active { 

border-color: #88f; 
} 

. cartltemsLine { 

font-size: small ; 
} 

.cartltemsLine img { 

height: 32px; 

vertical -align: middle; 
} 

.product { 

cursor: move; 
} 

Void a present l'un des deux gros morceaux de l'exemple : le script cote client. 
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Listing 7-19 Notre script client pour ce sympathique panier 

function initDraggablesO { Q 

new Draggable('product_l' , { revert: true }) ; 

new Draggable('product_2 ' , { revert: true }) ; 

Droppabl es. add ('i terns' , { Q 

accept: 'product', hoverclass: 'active', 

onDrop: function(product) { updateCart('add' , product); } 

}); 

Droppables.add('wastebin' , { 

accept: 'cartltem', hoverclass: 'active', 
onDrop: function(product) { 

Element. hide(product) ; 

updateCartC remove' , product); 
} 

}); 

} // initDragDrop 

function togglelndicatorO { © 
Element. toggleC indicator') ; 
} // togglelndicator 

function updateCart(mode, product) { Q 
var id = product .id. split('_') [1] ; 
new Ajax.Updater('items' , '/' + mode, { 

postBody: $H({ 'id': id }) .toQueryStringO , 

evalScripts: true, 

onLoading: togglelndicator, 

onComplete: togglelndicator 

}); 

} // updateCart 

Event. observe(window, 'load', initDragDrop); 

O On commence par declarer que nos deux produits peuvent etre deplaces, et doi- 
vent se repositionner une fois laches. 

Q On inscrit l'afficheur du panier comme zone de depot reservee aux produits, et la 
poubelle comme zone de depot reservee aux elements du panier (vous verrez que 
le XHTML renvoye par le serveur accole une classe cartltem aux elements qui 
peuvent etre deplaces). Pour le coup, il etait utile de factoriser l'invocation Ajax... 

Simple bascule d'affichage pour notre indicateur (rappel : son di spl ay : none doit 
etre inline, pas dans la CSS !). 

O L'invocation Ajax, assez avancee ! On appelle soit /add soit /remove, avec tou- 
jours un argument id qui identifie le produit, le tout en post par defaut. Lappel 
est encadre par les bascules de visibilite de l'indicateur. Comme on va renvoyer du 
XHTML contenant du JavaScript, il ne faut pas oublier d'activer evalScripts ! 
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Remarquez au passage que, pour tant de traitements, ce script est vraiment court ! 
Prototype et script. aculo. us sont de bonnes bibliotheques... 

Et bien sur, il reste a ecrire la gestion cote serveur. Nous deleguerons la creation du 
fragment XHTML representant l'interieur du panier a un modele interprete par 
ERb, comme nous l'avons deja fait plusieurs fois. Voici d'abord le code serveur, dans 
un fichier serveur. rb au-dessus de docroot. 

Listing 7-20 Le script serveur de gestion du panier, serveur.rb 

#! /usr/bin/env ruby 

requi re ' cgi ' 
require 'erb' 
require 'webrick' 
include WEBrick 

PRODUCT_LABELS = { Q 
'1' => 'Mug' , 
'2' => 'T-shirt' 

} 

cart = {} 

tempi ate_text = File. read ('cart . rhtml ') 

cart_html = ERB.new(template_text) 

server = HTTPServer. new (: Port => 8042) 

server .mount('/' , HTTPServlet: : FileHandler , './docroot') 

server .mount_proc('/add') do | request, responsel Q 
product_id = CCI: : parse(request .body) ['id'] [0] 
cart[product_id] = cart.include?(product_id) ? cart[product_id ] + 1 : 1 

sleep 1 # Simuler un A/R web, qu'on voie 1 'indicateur. . . 
response [' Content-Type ' ] = 'text/html' 
response. body = cart_html . result(binding) 
end 

server .mount_proc('/remove') do | request, responsel © 

product_id = CCI: : parse(request .body) ['id'] [0] 

if cart[product_id] > 1 

cart[product_id] = cart[product_id] -1 

else 

cart . del ete(product_id) 

end 

sleep 1 

response [' Content-Type ' ] = 'text/html' 

response. body = cart_html . result(binding) 
end 
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trap('INT') { server . shutdown } 
server .start 

O Evidemment, dans une veritable application, on irait pecher ces noms dynami- 

quement dans la base de donnees en reponse aux actions add et remove... 

Notez egalement l'initialisation d'un unique panier independant du client, la ou 

on utiliserait des cookies de session en temps normal. 
Ajout de produit : on recupere le parametre i d transmis en post, puis si on a deja cet 

ID dans le panier, on augmente la quantite, sinon on le cree avec une quantite de un. 
Suppression de produit : on recupere l'ID, puis s'il y en a plus d'un dans le panier, 

on diminue la quantite, sinon on retire carrement le produit du panier. 

Et voici le modele, cart . rhtml , dans le meme repertoire. II est un peu plus complexe 
que d'habitude, aussi nous allons detailler. 

Listing 7-21 Le modele utilise pour construire le XHTML interne du panier 

<% cart. each do | product, qty| %> 

<div class="cartItemsLine"> 
<% qty. times do Ml %> 

<img src="product<%= product %>.png" class="cartltem" 
id="item_<%= product %>_<%= i %>" style="position: relative" /> 
<script type="text/javascript"> 

new Draggable('item_<%= product %>_<%= i %>', { revert: true }) ; 
</script> 
<% end %> O 

<span class="tit1e"> 

<%= PRODUCT_LABELS [product] + " (#{qty})" %> 
</span> 
</div> 
<% end %> 
<%= 'Votre panier est vide.' if cart. empty? %> 

Boucle sur les produits du panier, avec leur ID et quantite. 

Boucle de a quantite - 1. 

On cree autant d'images du produit que necessaire. Notez la classe cartltem et 

l'ID unique, utilise dans le script pour pouvoir deplacer l'image. 
Fin de la boucle sur quantite. 
Fin de la boucle sur les produits. 
N'oublions pas les paniers vides ! 

Ouf ! Voila un exemple massif! Pour pouvoir le tester, lancez le serveur avec ruby 
serveur . rb, et naviguez sur http://localhost:8042/ : 
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Figure 7-7 

Notre panier, vierge, 
au demarrage 



Un sympathique panier - Mozilla rirefox 
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Figure 7-8 

Deplacement d'un produit dans 
le panier pour commande 



Un sympathique panier- Mozilla Firefax 
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Figure 7-9 

Le panier mis a jour 



Un sympathique panier - Mozilla Firefcx 
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Le panier apres quelques ajouts 
supplementaires. Notez les 
quantites. 
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Figure 7-11 

Retrait d'un produit du panier 
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Precautions d'emploi 

Encore tous joyeux d'avoir realise un aussi joli exercice, vous imaginez deja les inter- 
faces riches que vous allez realiser dans les tous prochains jours... Pretez tout de 
meme attention a ces quelques remarques importantes : 

• Si vous deviez retirer une zone de depot du DOM, il est imperatif que vous le 
signaliez au prealable au referentiel Droppables, a l'aide d'un appel a 
Droppables. remove. Si vous oubliez cette precaution, toute tentative de glisser- 
deplacer ulterieure echouera. 

• Si vous avez une interface suffisamment (inutilement ?) complexe pour avoir des 
zones de depot imbriquees, vous devez absolument les enregistrer de l'interieur 
vers l'exterieur, sous peine de ne voir reagir que les zones externes, aux depends 
des zones imbriquees. 



Tri de listes par glisser-deplacer 

Inutile de nous arreter la, le glisser-deplacer a une utilite de premier plan dans une 
interface web : l'ordonnancement d'elements dans une liste ! Sans glisser-deplacer, 
on en est reduit a cliquer a qui mieux mieux sur des boutons de montee et de des- 
cents en face de chaque element. Lorsqu'on n'a vraiment pas de chance, chaque clic 
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recharge la page. C'est comme ca qu'on obtient des listes non triees, la flemme ayant 
eu raison des bonnes intentions de l'utilisateur. 

Mais avec le glisser-deplacer, tout va mieux, l'utilisateur retrouvant le confort habi- 
tuel de ses applications classiques. C'est une utilisation tellement courante du glisser- 
deplacer que script.aculo.us fournit, evidemment, un mecanisme pret a l'emploi : 
Sortable. Le mode d'emploi general est plutot simple : on indique qu'il est possible 
de trier une structure avec un appel a Sortable. create, on desactive la fonction en 
appelant Sortable. destroy, et en cadeau bonus (parce que vous etes sympathique), 
on obtient une representation toute prete a l'envoi vers le serveur en appelant 
Sortabl e . sen' al i ze ! Voyons ces fonctions dans le detail. 

Que peut-on trier ? 

On peut theoriquement trier le contenu de n'importe quel element de type bloc, a 
l'exception des conteneurs de table, comme d'habitude (plus specifiquement les ele- 
ments table, thead, tbody, tfoot et tr). II semble toutefois qu'en utilisant un tbody 
signifie comme conteneur, les elements tr a l'interieur puissent etre ordonnes correc- 
tement sur MSIE 6/Win et Firefox. 

Autre contrainte liee aux tables : un conteneur dans lequel on peut trier posera pro- 
bleme sur MSIE s'il est present dans une table, a moins que la table ait une propriete 
CSS position: relative. 

On peut done trier les elements fils d'une liste bien sur (ol, ul) mais aussi de 
n'importe quel conteneur, par exemple des p dans un div. On peut meme jouer sur 
l'horizontalite aussi, avec des elements fils de type en ligne : img, span, etc. ou des 
elements styles en flottant, comme en temoigne d'ailleurs le spectaculaire puzzle 
d'exemple de http://wiki.script.aculo.us/scriptaculous/show/SortableFloatsDemo. 

Activer les fonctions d'ordonnancement 

Pour pouvoir manipuler le contenu d'un element en vue d'un ordonnancement, il 
faut appeler Sortable. create sur cet element conteneur. C'est sans doute 1' appel 
script.aculo.us qui a le plus d'options jusqu'ici, a l'exception des effets noyau. Jugez 
plutot ! 

Tableau 7-9 Options prises en charge par Sortable.create 



Option Description 


tag 


Nom des balises pour les elements fils qui vont pouvoir etre deplaces. Par defaut 1 i , ce qui 
evite de le preciser dans le cas frequent des listes. Pour les autres cas, a vous de le preciser. 


only 


Filtre supplemental optionnel pour les elements fils qu'on peut deplacer, d'une syntaxe 
identique a I'option accept de Droppabl es . add : nom de classe CSS ou tableau de 
noms de classes. 
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Tableau 7-9 Options prises en charge par Sortable.create (suite) 



Option Description 


overlap Indique la direction de I'ordonnancement. Par defaut 'vertical ', mais pour des ele- 
ments flottants ou des listes horizontales, preciser ' horizontal ' . 


constraint Identique a I'option homonyme de Draggable, mais ici a 'vertical' par defaut. 
Pour retirer toute contrainte, on remettra done a f al se. 


containment 


Determine le ou les conteneurs au sein desquels les elements fils peuvent etre deplaces. Par 
defaut, concerne uniquement lecontenusurlequelonappelle Sortable. create. Mais 
on peut passer un tableau de conteneurs ou d'lD de conteneurs (qui doit obligatoirement 
inclure le conteneur courant), par exemple pour permettre I'echange entre plusieurs listes. 


handle 


Identique a I'option homonyme de Draggabl e. 


hoverclass 


Identique a I'option homonyme de Droppabl es . add. 


ghosting 


Identique a I'option homonyme de Draggabl e. 


dropOn Empty 


Si actif, rend le conteneur Droppabl e lorsqu'il devient vide, en respectant 

contai nment pour les conteneurs sources. N'a pas d'interet si contai nment n'a que 

le conteneur courant, done par defaut a f al se. 


scroll 


Analogue a I'option homonyme de Draggabl e, mais limite au conteneur courant, qui 
aura de preference la propriete overflow: scroll. 


scroll Sensitivity Identique a I'option homonyme de Draggable. 


scrollSpeed 


Identique a I'option homonyme de Draggabl e. 


onChange 


Fonction de rappel invoquee des que I'ordre des elements change. Recoit I'element deplace 
en argument. Lors d'un transfert entre deux conteneurs, elle est appelee sur les deux. 


onUpdate 


Fonction de rappel invoquee en fin de glissement d'un element, si I'ordre resultant a effec- 
tivement change. Recoit le conteneur en argument. Lors d'un transfert entre deux conte- 
neurs, elle est appelee sur les deux. Les elements fils doivent avoir des ID nommes comme 
I'exige So rtabl e . se ri al i ze (voir plus loin). 


delay 


Temps en millisecondes pendant lequel le bouton de la souris doit etre enfonce avant que 
le glisser-deplacer ne puisse avoir lieu. Vaut zero (desactive) par defaut. 



II existe par ailleurs deux nouvelles options depuis la version 1.6.1, tree et treeTag, 
qui permettent la gestion d'arborescences plutot que de listes a plat. La documenta- 
tion manque pour ces options, mais si le sujetvous consume d'interet, vous trouverez 
des exemples complets dans les tests fonctionnels fournis dans la bibliotheque. 

Realisons un premier exemple avec une seule liste. Copiez votre repertoire draggable 
dans un nouveau repertoire sortable_one_list. Nous allons modifier le HTML 
comme suit. 

Listing 7-22 La page de test pour notre premier exemple d'ordonnancement 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN' 
"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
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<html xm"lns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

*• charset=iso-8859-15" /> 
<title>Test de Sortable (une liste)</title> 
<link rel="stylesheet" type="text/css" href="tests. ess" /> 
<script type=" text/ javascript" src=" prototype. js"x/script> 
<scri pt type="text/javascri pt" 

*• src="scriptacu"lous. js?load=effects,dragdrop"x/script> 
<script type="text/javascript" src="tests. js"x/script> 
</head> 
<body> 

<hl>Test de <code>Sortable</code> (une "liste)</hl> 

<ul id="people"> 

<li id="person_l">Adrien</li> 

<li id="person_2">Christophe</li> 

<li id="person_3">Elodie</li> 

<1 i id="person_4">Emmanuel</l i> 

<li id="person_5">Marie-Helene</li> 

<li id="person_6">Valerie</li> 
</ul> 

</body> 
</htm"l> 

Un peu de CSS pour ameliorer la presentation de la liste... 

Listing 7-23 Quelques regies CSS font des merveilles sur notre liste 

#people { 

padding: 0; 
} 

#people li { 

font-family: sans-serif; 

list-style-type: none; 

width: 20ex; 

height: 1.5em; 

line-height: 1.5em; 

padding: 0.5ex; 

margin: 0. 5ex 0; 

background: #ffa; 

border: lpx solid #880; 

cursor: move; 
} 
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Voyons a present le script, outrageusement simple. 
Listing 7-24 Notre script activant I'ordonnancement pour une liste 

function initSortablesO { 

Sortabl e . createC ' peopl e ' ) ; 

} // initSortables 

Event. observe(window, 'load', initSortables, false); 

En depit (ou plutot a cause) de sa simplicite, ce code souleve une question ardue : 
est-il vraiment moral de faire payer le client pour 9a ? Mais baste, laissons de cote ces 
considerations ethiques, et observons le resultat. 



Figure 7-12 

Deplacement dans une liste 
oil le tri est possible 
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C'est sympathique, non ? Voyons un peu la difference avec le ghosting active. Modi- 
fiez simplement les options de create : 

Sortable. createC people' , { ghosting: true }) ; 
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Rechargez et tentez un deplacement. 



Figure 7-13 

Deplacement « ghost » dans 
une liste ou le tri est possible 
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Vous voyez comme 1' element reste a sa place en attendant le relachement, laissant un 
clone translucide servir au deplacement ? Je trouve 9a plus agreable quand on trans- 
fere d'une liste a l'autre. Et justement... 

Realisons un deuxieme exemple, avec deux listes aux elements interchangeables ! 
Copiez votre repertoire dans un nouveau repertoire sortable_two_lists. On com- 
mence, comme d'habitude, par modifier le HTML. 

Listing 7-25 Notre page HTML avec deux listes 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xm"lns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

-» charset=iso-8859-15" /> 
<title>Test de Sortable (deux listes)</title> 
<link rel="stylesheet" type="text/css" href="tests. ess" /> 
<script type=" text/ javascript" src=" prototype. js"x/script> 
<scri pt type="text/javascri pt" 

•» src="scriptaculous. js?load=effects,dragdrop"x/script> 
<script type="text/javascript" src="tests. js"x/script> 
</head> 
<body> 
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<hl>Test de <code>Sortable</code> (deux listes)</hl> 
<ul id="bulle" class="people"> 



<li 
<li 
<li 
<li 
<li 
</ul> 



id="person_l">Adrien</li> 
id="person_2">Christophe</li> 
id="person_3">Emmanuel</li> 
id="person_4">Marie-Helene</li> 
i d=" person_5 ">Val eri e</l i > 



<ul id="friends" class="people"> 

<li id="person_ll">Amir</li> 

<li id="person_12">Aurore</li> 

<li id="person_13">Claude</li> 

<li id="person_14">Elodie</li> 

<li id="person_15">Jacques</li> 

<li id="person_16">Juliette</li> 

<li id="person_17">Thomas</li> 
</ul> 

</body> 
</html> 

On va ajuster un tout petit peu la CSS pour traiter plusieurs listes similaires. 
Listing 7-26 Notre CSS a jour pour traiter deux listes 

.people { 

position: absolute; 

padding: 0; 
} 
. peopl e li { 

font-family: sans-serif; 

list-style-type: none; 

width: 20ex; 

height: 1.5em; 

line-height: 1.5em; 

padding: 0.5ex; 

margin: 0. 5ex 0; 

border: lpx solid #880; 

cursor: move; 
} 
#bulle li { 

background: #ffa; 
} 
#friends { 

left: 30ex; 
} 
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#friends li { 

background: #cfa; 
} 

Et enfin, on ajuste notre script, ce qui permet de voir quelques options supplemen- 
taires (au passage, on factorise, pour la premiere fois, les options). 

Listing 7-27 Notre script pour deux listes aux elements interchangeables 

function initSortablesO { 
var options = { 

dropOnEmpty: true, containment: [ 'bulle', 'friends' ], 
constraint: false, ghosting: true 

}; 

So rtable. create (' bull e' , options) ; 
Sortable.createC friends ' , options) ; 
} // initSortables 

Event. observe(window, 'load', initSortables, false); 
Voyons un peu le resultat... 



Figure 7-14 

Deplacement interliste, 
avec « ghosting » ! 
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Remarquez que les elements de liste prennent evidemment la couleur de leur liste 
conteneur, en vertu des regies CSS applicables. 
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Figure 7-15 
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II nous reste toutefois un petit probleme : nous avons beau avoir active 1' option 
dropOn Empty, elle ne va pas nous servir a grand-chose. En effet, une fois une des listes 
totalement transferee dans l'autre, les dimensions calculees par le navigateur pour 
celle-ci se reduisent a zero. II n'y a done plus rien sur quoi ramener des elements ! 

Void une proposition de solution : nous allons definir une classe supplementaire 
applicable aux listes, qui leur donne une couleur de fond et de bordure identifiables, 
et nous allons definir des dimensions par defaut pour les listes, qui seront certes 
depassees (notamment en hauteur) l'essentiel du temps (car la valeur par defaut pour 
la propriete overflow est visible), mais nous seront bien utiles une fois l'une des 
listes vide. Void deja les ajustements a la CSS, mis en exergue. 

Listing 7-28 Ajustements a notre CSS pour gerer les listes vides 

.people { 

position: absolute; 

padding: 0; 

width: 22ex; 

height: 2em; 
} 
.people. empty { 

background: #eee; 

border: lpx solid silver; 



} 
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Mais cela ne suffit pas : certes, une fois la liste vide, die occupera toujours un certain 
espace, et on pourra deposer dessus, mais faute de couleurs pour la rendre evidente, 
l'utilisateur ne saura pas qu'il peut y deposer quoi que ce soit. Or, la classe a appliquer 
doit l'etre dynamiquement. C'est l'occasion revee de s'essayer a la fonction de rappel 
onUpdate. 

Listing 7-29 Notre nouvelle fonction initSortables 

function initSortables() { 
var options = { 

dropOnEmpty: true, containment: [ 'bulle', 'friends' ], 
constraint: false, ghosting: true, 
onUpdate: function(list) { 

if (0 == list.getElementsByTagNameC'li '). length) 

Element . addCl as sName (list, 'empty') ; 
else 

Element . removed assNameCH st , 'empty') ; 
} 

}; 

So rtable. create (' bull e' , options) ; 
Sortable.createC friends ' , options) ; 
} // initSortables 

Tant qu'une liste n'est pas vide, rien ne change par rapport a tout a l'heure. Mais si 
une liste est vide, on voit alors sa position, ce qui nous suggere qu'on peut deposer 
dessus a nouveau. 



Figure 7-16 

Une liste vide apparaTt 
differemment. 
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Figure 7-17 

On peut done facilement y 
redeposer un element. 
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Ah, 9a fait plaisir ! 



Desactiver I'ordonnancement 

Dans la tradition desormais etablie de presence d'un moyen de desactivation, syme- 
trique a 1' activation de fonctionnalite, il est possible de faire qu'un conteneur cesse 
d'offrir I'ordonnancement par glisser-deplacer. II suffit d'appeler Sortable. destroy 
sur le conteneur qu'on avait passe a Sortable. create. Plus simple, je ne vois pas... 

Envoyer I'ordre au serveur 

Enfin, modifier I'ordre des elements ne servirait pas a grand-chose si on ne pouvait 
pas envoyer l'information au serveur pour quelle persiste. Vous vous en doutez, 
script.aculo.us n'a aucune intention de vous laisser patauger dans l'examen du DOM 
pour construire manuellement la liste des ID correspondant au nouvel ordre. 

Vous avez peut-etre remarque que dans nos exemples, nous avons attribue a chaque 
element contenu (en l'occurrence des li) un attribut id de la forme 
prefixe_suffixe. C'est une exigence de Sortable. serialize, la fonction que nous 
pouvons utiliser pour obtenir deja une representation URL encodee de I'ordre de nos 
elements. Cette fonction produit une chaine constituee de parametres prefixe[] 
dont les valeurs sont les suffixes concernes, dans le bon ordre. 
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Par exemple, pour le DOM correspondant au HTML suivant : 

<ul id="bu"ne" class="people"> 

<li id="person_l">Adrien</li> 

<li id="person_2">Christophe</li> 

<li id="person_3">Emmanue"l</"li> 

<li id="person_4">Marie-Helene</li> 

<1 i i d=" pe r son_5 ">Val e ri e</l i > 
</ul> 

Un appel a Sortable. serialize ('bulle') donnera ceci : 
bulle[]=l&bulle[]=2&bulle[]=3&bulle[]=4&bulle[]=5 

Cette syntaxe pour les noms resulte en un traitement automatique par la plupart des 
technologies cote serveur, PHP et Ruby On Rails pour ne citer qu'eux. En JSP, on 
est un peu plus malheureux, comme toujours pour la gestion des parametres : on 
devra utiliser un getParameterVal ues ( ' bul 1 e [] ' ) et iterer sur le resultat. 

Notez que serialize accepte deux options. 



Option 

tag 



name 



Tableau 7-10 Options prises en charge par Sortable.serialize 

Description 

Identique a I'option homonyme de Sortable. create, etdoit bien sur etre 
synchrone avec la valeur utilisee a I'appel de celle-ci. 



Nom a utiliser pour les noms de champ de la representation texte. Utilise par defaut 
I'lD du conteneur. 



Completion automatique de texte 

Pour terminer avec les fonctions incontournables de script.aculo.us, penchons-nous 
sur ses possibilites de completion automatique de texte. II existe deux classes dediees 
a ce domaine : Ajax.Autocompleter et Autocompleter. Local. Nous nous interesse- 
rons ici a la premiere, la seconde permettant une completion a partir de donnees 
stockees cote client, sous quelque forme que ce soit. Notez toutefois que les deux 
derivent de Autocompleter. Base, et partagent bon nombre de parametres. Dans les 
tableaux 7-11 des options et 7-12 des fonctions de rappel ci-apres, j'indique en ita- 
lique les parametres specifiques a la variante Ajax. 

Creation d'un champ de saisie a completion automatique 

Pour disposer d'un champ de saisie dote d'une completion automatique de texte 
(champ generalement de type <i nput type="text" . . . />), il faut en realite definir 
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deux elements dans votre HTML : le champ lui-meme, plus un conteneur destine a 
recevoir les suggestions. II vous appartient de styler comme bon vous semble ce con- 
teneur, pour etre conforme a la charte graphique de votre site. En effet, la couche 
serveur doit y retourner une liste non ordonnee (ul/li), afin que script.aculo.us 
puisse correctement gerer les interactions clavier et souris. 

Void un exemple de bloc HTML : 



<input type="text" id="edtName" name= 
<div id="nameCompletions"x/div> 



'contactName" /> 



Notez la concision : c'est en partie du au fait que script.aculo.us ajoutera pour vous 
un attribut autocomplete="off" au champ de saisie (deux types de completion auto- 
matique rentreraient en conflit), et ajoutera si necessaire une propriete CSS 
posi ti on : absol ute a votre conteneur de suggestions. 

Cote JavaScript, vous avez simplement besoin de construire un objet 
Ajax.Autocompleter autour de ces deux elements, accompagne eventuellement 
d'options : 

I new Ajax.Autocompleter('edtName' , 'nameCompletions ' [, options]}; 

Voila, c'est tout simple. Nous allons mettre en oeuvre dans quelques instants deux 
exemples, l'un trivial, l'autre plus personnalise. Mais avant, faisons le tour des 
options et fonctions de rappel disponibles. 

Voici la liste des options prises en charge par notre Ajax.Autocompleter. 
Tableau 7-11 Options prises en charge par Ajax.Autocompleter 



Option Description 


paramName 


Nom du parametre a envoyer au serveur. Par defaut I'attribut name du champ de saisie. 


tokens 


Permet la completion incremental. Voir plus bas. Par defaut un tableau vide : [], done 
desactive. 


frequency 


Intervalle d'examen pour completion, en secondes. Par defaut . 4. Evitez de descendre 
en-dessous, pour des raisons d'ergonomie... 


minChars 


Nombre minimum de caracteres a saisir avant de declencher une completion. 1 par 
defaut. serait ignore, mais mettre du negatif reviendrait a vous tirer dans le pied ! 


indicator 


ID ou reference directe sur I'element eventuel dedication de progression (fortement con- 
seille), par exemple un di v avec un spinner et un texte du style « assistance en 
cours... ». Rien par defaut. 



Ajax, ou I'art de chuchoter 

Deuxieme partie 



Option 

select 



Tableau 7-11 Options prises en charge par Ajax.Autocompleter (suite) 
Description 






autoSelect 



Nom de classe servant a filtrer le contenu de I'option retenue pour extraire la valeur de 
completion. Pas de valeur par defaut : I'ensemble de I'option est prise, a I'exception des 
contenus marques avec une classe CSS i informal (voir plus bas, « Personnalisation des 
contenus renvoyes »). 

Indique si lorsqu'un seul resultat est obtenu, il doit etre automatiquement selectionne. 
Vaut f al se par defaut. 



parameters 



Permet de definir des parametres supplementaires a envoyer au serveur pour completion, 
afin d'ajouter generalement un contexte de recherche. Texte au format URL encode. Vide 
par defaut. 



asynchronous 



Determine si la requete est asynchrone (true, par defaut) ou non (fal se). Y toucher 
me semble une tres mauvaise idee : une requete synchrone va geler le navigateur pen- 
dant son execution... 



Pour memoire, seules les options en italique sont specifiques a Ajax.Autocompleter : 
les autres viennent de Autocompleter.Base, et valent done aussi pour 
Autocompleter. Local. Meme chose pour les fonctions de rappel ci-dessous. 

II existe par ailleurs pas moins de cinq fonctions de rappel, qui sont toutefois tres rare- 
ment utilisees, l'immense majorite des besoins etant deja couverte par les options. 

Tableau 7-12 Fonctions de rappel prises en charge par Ajax.Autocompleter 

Fonction Description 

ca 11 back Peut referencer une fonction chargee de modifier le texte du parametre a envoyer au ser- 

veur, apres composition initiale de celui-ci (nom=val eu r). II s'agit generalement 
d'ajouter un contexte fixe, ce qui se fait plus simplement avec parameters. Pas de 
valeur par defaut. 

Reference la fonction appelee pour afficher la liste des suggestions. Par defaut, cale si 
besoin votre conteneur en position absolue immediatement sous le champ de saisie, ali- 
gns en largeur, et le fait apparaitre a I'aide d'un Appear de 1/8 de seconde. 



onShow 



onHide 



updateElement 
afterUpdateElement 



Symetrique de onShow, qui par defaut masque le conteneur a I'aide d'un Fade de 
meme duree. 

Appelee a la place de la fonction normalement chargee de placer dans le champ de saisie 
un texte correspondant a I'element choisi dans la liste des suggestions. 

Appelee apres I'insertion d'une valeur dans le champ de saisie suite a la validation d'une 
suggestion. 



Dernier point avant d'aborder l'exemple, voyons comment script. aculo.us permet a 
l'utilisateur de faire son choix parmi les suggestions. 
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Interaction clavier et souris 

A l'affichage du conteneur de suggestions, script.aculo.us selectionne automatique- 
ment la premiere, en lui ajoutant la classe CSS selected (a vous de styler comme 
bon vous semble). La bibliotheque gere alors, tout le temps de l'affichage, les mani- 
pulations suivantes : 

• survol de la souris, touches curseur (Haut, Bas, Gauche, Droite) : ajustement la 
selection ; 

• clic, Entree, Tabulation : validation de la selection ; 

• Echap : fermeture du bloc des suggestions, retour a la frappe normale ; 

• les autres frappes clavier s'ajoutent normalement a la saisie, et mettent done a jour 
la liste des suggestions. 

On a done l'embarras du choix, 1'utilisation du bloc de suggestion est plutot accessible. 

Attention : j'ai constate un probleme de capture de la touche Entree (preferer Tabula- 
tion) sur Opera 9 et Safari 2. 

Un premier exemple 

Pour notre premier exemple, nous allons creer un formulaire de saisie d'un nom de 
bibliotheque Ruby. De cette facon, nous avons d'emblee a notre disposition l'ensemble 
des modules de la bibliotheque standard, fournis avec Ruby. Qui plus est, cela nous 
donnera l'occasion d'ecrire un code serveur un peu plus puissant que d'habitude. 

Copiez un de vos repertoires de travail recents, par exemple draggabl e, dans le sous- 
repertoire docroot d'un nouveau repertoire autocomplete_simple. Nous n'aurons 
pas besoin de dragdrop. js, mais il vous faudra ajouter le controls, js fourni dans 
l'archive de script.aculo.us. Void deja le fichier HTML. 

Listing 7-30 Le HTML pour notre completion simple 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

*• charset=iso-8859-15" /> 
<title>Test simple de Ajax.Autocompleter</title> 
<link rel="stylesheet" type="text/css" href="tests. ess" /> 
<script type=" text/ javascript" src=" prototype. js"x/script> 
<scri pt type="text/javascri pt" 

•» src="scriptaculous . js?load=ef feet s, control s"x/script> 
<script type="text/javascript" src="tests. js"x/script> 
</head> 
<body> 
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<hl>Test simple de <code>Ajax.Autocompleter</codex/hl> 



<form> 
<P> 



<label for="edtLibrary" accesskey="B">Bibliotheque Ruby</label> 
<input type="text" id="edtLibrary" name="library" /> 
<div id="lib_suggestions" class="autocomplete"x/div> 

</p> 
</form> 

</body> 
</html> 

Remarquez la simplicite. En temps normal, notre formulaire aurait bien sur une 
action, un bouton submit, etc. Passons au script client, qui reflete admirablement la 
simplicite de notre exemple. 

Listing 7-31 Le script client, vraiment trivial ! 

function initAutocompleterO { 

new Ajax.Autocompleter('edtLibrary' , 'lib_suggestions' , 
'/get_suggestions') ; 

} // initAutocompleter 

Event. observe(window, 'load', initAutocompleter) ; 

Trois parametres suffisent : FID du champ de saisie, celui du conteneur de sugges- 
tions (qui sera automatiquement masque a ce moment-la), et l'URL a invoquer (sans 
aucun parametre additionnel, c'est important). Pour le reste, nous laissons l'ensemble 
des options a leur comportement par defaut. 

Ceci suffirait, mais on obtiendrait un aspect visuel pas tres professionnel, qui ressem- 
blerait a ceci. 



Figure 7-18 

La completion sans style 
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C'est justement pour fournir un style passe-partout plus agreable que nous avons 
ajoute une classe CSS a notre ch'v conteneur (afin de pouvoir reutiliser le style sur 
plusieurs champs a completion dans la meme page). Voici notre feuille de styles, 
qu'on pourrait encore simplifier, mais qui fait dans un certain raffinement. 

Listing 7-32 Une feuille de styles passe-partout de qualite pour les suggestions 

div.autocomplete { 

position: absolute; /* Histoire d'etre explicite... */ 

width: 250px; /* Sera ajuste par script. aculo. us */ 

background-color: white; 

border: lpx solid #888; 

margin: Opx; 

padding: Opx; 
} 

div.autocomplete ul { 

list-style-type: none; 

margin: Opx; 

padding: Opx; 
} 

div.autocomplete ul li { 

list-style-type: none; 

display: block; 

margin: 0; 

cursor: default; 

/* Et quelques finasseries. . . */ 

padding: O.lem 0.5ex; 

font-family: sans-serif; 

font-size: 90%; 

color: #444; 

height: 1.5em; 

line-height: 1.5em; 
} 

/* Rappel : script. aculo. us active une classe 'selected' 

lorsqu'un element est selectionne */ 
div.autocomplete ul li. selected { 

background-color: #ffb; 
} 

A present, passons a la couche serveur. Nous avons besoin de deux fichiers : notre 
eternel serveur. rb et un modele pour la generation de la liste non ordonnee a ren- 
voyer a la couche client. Voici deja le modele. 
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Listing 7-33 Le modele trivial de reponse, suggestions.rhtml 

<ul> 

<% libs. each do |lib| %> 

<li><%= lib %></li> 
<% end %> 
</ul> 

Et maintenant le coeur de l'exemple, la couche serveur... 
Listing 7-34 La couche serveur pour la completion automatique 

#! /usr/bin/env ruby 

requi re 'cgi ' 
require 'erb' 
require 'webrick' 
include WEBrick 

tempi ate_text = File. read ('suggestions. rhtml ') 
suggestions = ERB.new(template_text) 

server = HTTPServer. new (: Port => 8042) 

server .mount('/' , HTTPServlet : : FileHandler , './docroot') 

server .mount_proc('/get_suggestions') do | request, responsel 
name_start = CCI: : parse(request . body) ['library'] [0] 
suffix = "/#{Regexp.escape(name_start)}*.rb" Q 
libs = $LOAD_PATH.map { | di r | Q 

Dir.globCdir + suffix, File: :FNM_CASEFOLD) .map { |f| 

File.basename(f , '.rb') 
} 
} . f 1 atten . sor t . uni q 

response ['Content-Type'] = 'text/html' 
response. body = suggestions. result(binding) 
end 

trap('INT') { server. shutdown } 

server .start 

La ligne Q nous protege de fragments comme « * » ou « . . », qui n'auront pas d'effet 
particulier. A la ligne Q, $L0AD_PATH est une variable globale en Ruby qui contient 
l'ensemble des repertoires ou chercher les modules. Pour chacun, on y cherche des 
fichiers demarrant par notre texte et portant 1' extension . rb, sans se soucier de la 
casse. On « aplatit » le tableau de tableaux obtenu, on le trie, et on retire les eventuels 
doublons. 



Une ergonomie de reve avec script. aculo. us 

Chapitre 7 



Tout ca en si peu de lignes ! 

Voyons a present le resultat, en quelques etapes. 



Figure 7-19 

Le champ a vide, en attente 
d'un premier caractere saisi 
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Figure 7-20 

Completion sur 
le premier caractere 
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Figure 7-21 

Affinage avec 

un deuxieme caractere saisi 
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Figure 7-22 

La touche Bas (ou la souris) 
nous amene sur la seconde 
suggestion. 
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N'est-ce pas sympathique comme tout, franchement ? Bon, quand vous aurez fini de 
tester toutes les lettres de l'alphabet pour voir les modules de la bibliotheque Ruby 
standard (j'ai beau les connaitre, je n'ai moi-meme pas pu m'en empecher...), passez a 
la prochaine section pour decouvrir comment renvoyer des contenus plus riches 
comme suggestions. 
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Figure 7-23 

Leclic, Entree ou Tabulation 
valident la suggestion. 
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Personnalisation des contenus renvoyes 

En decrivant l'option select, nous avons simplement brosse la surface de la selection 
de contenu operee par les Autocompleters lorsqu'on choisit une des suggestions. 

Quelle que soit la configuration, seuls les contenus textuels (en termes DOM, les 
noeuds texte) sont retenus, agreges les uns aux autres avec une espace entre chacun. 
Le corollaire est immediat : vous pouvez renvoyer, dans chaque 1 i , un contenu struc- 
ture (div, p, img, etc.) : seules les portions textes seront recuperees. Ainsi, considerez 
l'element suivant : 

<img class="contactPhoto" src="/photos/contacts/17. jpg" /> 
Thomas Fuchs 

<div class="note">Auteur de script. aculo. us</div> 
</"li> 

Sa selection aboutirait a l'insertion du texte « Thomas Fuchs auteur de 
script .aculo. us ». 

Mais script.aculo.us ne s'arrete pas la. II est frequent de renvoyer des contenus textes 
plus riches que necessaire, afin de fournir un contexte a l'utilisateur pour guider son 
choix. Par exemple, dans des suggestions de noms de contacts, on ajoutera l'adresse 
courriel ou le nom de la societe (voire une photo, mais comme ce n'est pas du texte, 
elle serait de toutes facons ignoree a la validation). 
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Le moyen le plus simple pour gerer cela consiste generalement a aj outer aux seg- 
ments « superflus » une classe CSS informal. Par defaut, script.aculo.us ignore les 
elements ainsi marques. Du coup, en modifiant l'exemple precedent comme ceci : 

<li> 

<img class="contactPhoto" src="/photos/contacts/17. jpg" /> 

Thomas Fuchs 

<div class="note informa"l">Auteur de script .aculo.us</div> 
</li> 

On obtiendrait simplement en validant notre choix : Thomas Fuchs. Cependant, ce 
nest parfois pas la facon ideale de travailler, notamment si vous avez beaucoup d'ele- 
ments superflus dans votre suggestion. C'est pourquoi l'option select vous permet 
de preciser une classe specifique qui marque, au lieu des elements a ignorer, les ele- 
ments a inclure. 

Dans l'exemple qui va suivre, nous allons tirer parti de cette fonctionnalite pour ren- 
voyer des contenus complexes mais ne retenir que le nom de chaque suggestion pour 
l'ajout dans le champ de saisie. Nous allons aussi illustrer la completion incrementale, 
qui permet de saisir plusieurs valeurs a la suite, en les separant par un token, qui est 
generalement la virgule. On ne derogera pas ici a la regie. 

Copiez votre repertoire autocomplete_simple dans un nouveau repertoire 
autocomplete_advanced. La page HTML necessite juste quelques ajustements cos- 
metiques (titre, pluriel au nom du champ et a son libelle, etc.). 

Listing 7-35 Notre page HTML mise a jour pour une completion incrementale 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

* charset=iso-8859-15" /> 
<title>Test avance de Ajax.Autocompleter</title> 
<link rel="stylesheet" type="text/css" href="tests. ess" /> 
<script type=" text/ javascript" src=" prototype. js"x/script> 
<scri pt type="text/javascri pt" 

•» src="scriptaculous. js?load=effects, control s"x/script> 
<script type="text/javascript" src="tests. js"x/script> 
</head> 
<body> 

<hl>Test avance de <code>Ajax.Autocompleter</codex/hl> 
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<form> 

<P> 

<label for="edtLibraries" accesskey="B">Bibliotheques Ruby 

</label> 

<input type="text" id="edtLibraries" name="libraries" /> 

<div id="lib_suggestions" class="autocomplete"x/div> 
</p> 
</form> 

</body> 
</html> 

Le script est egalement mis a jour pour utiliser quelques options speciales, afin 
notamment de continuer a envoyer un parametre library alors que le champ, plus 
logiquement, s'appelle libraries. 

Listing 7-36 Notre script ajuste 

function initAutocompleterO { 
new Ajax.Autocompleter( 

'edtLibraries' , 'lib_suggestions' , '/get_suggestions ' , 

{ paramName: 'library', tokens: [','], select: 'libName' }) ; 

} // initAutocompleter 

Event. observe(window, 'load', initAutocompleter); 

Pour chaque module Ruby, nous allons fournir sa taille et sa date de derniere modifi- 
cation. Nous aurons done un modele un peu plus riche. 

Listing 7-37 Le modele de suggestions avec les nouvelles donnees 

<ul> 

<% libs. each do |lib| %> 
<li> 

<div class="libName"><%= lib. name %></div> 
<div class="libMTime"> 

*» <%= lib.mtime.strftimeC'%d/%m/%Y %H:%M:%S') %></div> 
<div class="libSize"><%= lib. size %> octets</div> 
</li> 
<% end %> 
</ul> 
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Evidemment, la CSS suit. 

Listing 7-38 La feuille de styles ajustee pour ces nouvelles donnees 

div.autocomplete { 

position: absolute; /* Histoire d'etre explicite... */ 

width: 250px; /* Sera ajuste par script. aculo. us */ 

background-color: white; 

border: lpx solid #888; 

margin: Opx; 

padding: Opx; 
} 

div.autocomplete ul { 

list-style-type: none; 

margin: Opx; 

padding: Opx; 
} 

div.autocomplete ul li { 

list-style-type: none; 

display: block; 

margin: 0; 

cursor: default; 

/* Et quelques finasseries (mais plus de color)... */ 

padding: O.lem 0.5ex; 

font-family: sans-serif; 

font-size: 90%; 

height: 3.5em; 
} 

/* Rappel : script. aculo. us active une classe 'selected' 

lorsqu'un element est selectionne */ 
div.autocomplete ul li. selected { 

background-color: #ffb; 
} 

div.libMTime, div.libSize { 

font- size: 80%; 

color: #444; 
} 

div.libMTime { 

margin: 0.2ex 2ex; 
} 

div.libName { 

font-weight: bold; 
} 



Une ergonomie de reve avec script. aculo. us 

Chapitre 7 



div.libSize { 

margin: 0.5em 2ex; 

} 

Remarquez la classe speciale pour la portion dont le contenu nous interesse 
(libName) lorsque l'utilisateur fera son choix. Bien, il ne nous reste plus qua mettre a 
jour la couche serveur. 

Listing 7-39 Notre nouvelle couche serveur, avec une classe dediee 

#! /usr/bin/env ruby 

requi re ' cgi ' 

require 'erb' 

require 'webrick' 

include WEBrick 

class Liblnfo Q 

attr_reader :name, :mtime, :size 

def initial ize(name) 

©name = File.basename(name, '.rb') 

Omtime = File.mtime(name) 

@size = File. size (name) 
end 

def <=>(other) Q 

self. name <=> other. name 
end 
end 

tempi ate_text = File. read ('suggestions . rhtml ') 
suggestions = ERB.new(template_text) 

server = HTTPServer. new (: Port => 8042) 

server .mount('/' , HTTPServlet: : FileHandler , './docroot') 

server .mount_proc('/get_suggestions') do | request, responsel 
name_start = CGI : :parse(request. body) [' library' ] [0] 
suffix = "/#{Regexp.escape(name_start)}* . rb" 
libs = $LOAD_PATH.map { |dir| 

Dir.glob(dir + suffix, File: : FNM_CASEFOLD) .map { |f| 
Liblnfo.new(f) Q 

} 
} . f 1 atten . sort . uni q 

response [' Content-Type ' ] = 'text/html' 
response. body = suggestions. result(binding) 
end 
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trap('INT') { server. shutdown } 
server .start 

O Petite classe dont les attributs sont en lecture seule, representant les donnees que 

nous retenons pour chaque module. Le constructeur prend le nom complet du 

module (chemin compris) en argument. 
L'operateur <=>, en Ruby, est utilise pour les comparaisons, done pour le tri. 

Ainsi, on preserve le fonctionnement de l'appel ulterieur a sort et uniq. 
Q Et voila ! Au lieu d'utiliser directement le nom simple du module, on construit un 

objet Liblnfo. 

Observons a present un exemple de saisie en plusieurs etapes. 



Figure 7-24 

Saisie d'un premier caractere 
et suggestions riches 
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tempfile 
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thread 


07/06/2005 11:41:17 
0400 octets 


thwait 
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time 
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timeout 


15/12/2005 16:57:05 
23SR octets 


tmpdir 
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trace i 
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Figure 7-25 

Choix d'une premiere valeur 
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Figure 7-26 

La validation n'a retenu 
que le nom. 
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Figure 7-27 

Apres avoir saisi le « token > 
(la virgule), on attaque une 
nouvelle valeur. 
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Figure 7-28 

La validation ajoute la 
suggestion retenue, au lieu 
de remplacer. 
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Une ergonomie de reve avec script. aculo. us 

Chapitre 7 

Et ce n'est pas tout ! II y a d'autres services 

Decidement, script. aculo.us nous facilite beaucoup de choses. Et pourtant, nous 
n'avons vu qu'une partie du framework. Citons rapidement les services restants : 

• Slider permet de realiser des champs alternatifs de saisie de valeur numerique 
bases sur une rampe (verticale ou horizontale) sur laquelle on peut faire evoluer 
des poignees. Totalement portable, le systeme n'en est pas moins hautement 
configurable : poignees multiples, limitations dynamiques des intervalles de 
valeurs, etc. 

— Essayez : http://wiki.script.aculo.us/scriptaculous/show/SliderDemo (et vous trou- 
verez des exemples beaucoup plus pousses dans les tests fonctionnels inclus 
dans l'archive). 

— Documentation : http://wiki.script.aculo.us/scriptaculous/show/Slider 

• In Place Editing fournit deux mecanismes permettant de modifier a la volee une por- 
tion quelconque de la page et de synchroniser cote serveur (comme les titres et notes 
dans Netvibes, par exemple). Les documentations en ligne sont tres completes 
(beaucoup d'options), sur http://wiki.script.aculo.us/scriptaculous/show/lnPlaceEditing. 

• Bui 1 de r simplifie grandement la creation dynamique d'elements via le DOM. On 
a bien vu, au chapitre 3, que la creation DOM d'un contenu complexe est vite fas- 
tidieuse. Builder simplifie considerablement cette tache : 
http://wiki.script.aculo.us/scriptaculous/show/Builder. 



Avoir le bon recul : les cas ou Ajax est une mauvaise 
idee 

Toujours dans l'optique de qualite et de methodologie de ce livre, il est temps d'apporter 
un regard critique sur les tresors de possibilites nouvelles que nous offrent ces fra- 
meworks (sans parler des nombreux outils prets a l'emploi qu'on peut trouver dans les 
frameworks supplementaires, par exemple Dojo, evoque plus loin dans ce chapitre). 

Employer Ajax, des effets visuels ou des composants graphiques avances n'est pas 
toujours une bonne idee : un usage a tout crin, sans consideration ergonomique, peut 
rendre vos pages (et done votre application web) inutilisable pour une partie signifi- 
cative des visiteurs et utilisateurs. 

Nous allons d'abord evoquer l'ensemble des points a surveiller et des problemes 
potentiels, pour finir par une serie de pratiques recommandees qui permettent de les 
resoudre, ou au moins de les attenuer. 
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Ajax et l'accessibilite 

On a deja defini l'accessibilite dans la premiere partie de ce livre, en etudiant les rela- 
tions entre celle-ci, JavaScript et le DOM. On l'a vu, l'accessibilite ne concerne pas 
que des utilisateurs non-voyants, comme on le croit souvent : elle concerne toute uti- 
lisation alternative de vos pages : peripheriques a petit ecran (de plus en plus 
repandus), sans clavier physique ou sans souris, handicaps visuels de toutes sortes (la 
cecite n'etant qu'un cas parmi d'autres), handicaps moteurs rendant l'utilisation du 
clavier ou de la souris difficiles, handicaps cognitifs comme la dyslexic. 

Nous avons vu que JavaScript, et les pages dynamiques en general, ne vont pas force- 
ment a l'encontre d'une accessibilite soignee. Mais il est evident que l'emploi de 
mecanismes encore plus dynamiques (effets visuels, glisser-deplacer, etc.) et le 
recours a Ajax soulevent de nouvelles questions quant a l'accessibilite et l'ergonomie. 

Considerations techniques 

Nous avons d'abord la question de la disponibilite de XMLHttpRequest. Dans l'etat 
actuel des navigateurs, disposer de XMLHttpRequest revient a avoir JavaScript active 
et le DOM niveau 2 pris en charge, ce qui couvre la quasi-totalite des navigateurs 
repandus. II existe tout de meme un probleme : le fait que sur MSIE 6 et anterieurs, 
XMLHttpRequest est fourni comme un ActiveX. 

En effet, en raison de la tres faible securite assuree par cette technologie, de tres 
nombreux administrateurs systeme en entreprise desactivent purement et simple- 
ment ActiveX sur l'ensemble des MSIE de leur pare informatique. Sur ce type de 
poste client, meme si nos pages peuvent utiliser JavaScript et manipuler le DOM, 
elles seront incapables d'utiliser Ajax. Ce n'est pas forcement un probleme pour les 
applications intranet, ces memes responsables informatiques mettant generalement 
en place une politique plus tolerante pour la « zone intranet » reconnue par MSIE. 

Le probleme se corse encore davantage lorsque le service informatique recourt a une 
mesure encore plus draconienne, frequente pour un pare ou certains postes ne peu- 
vent pas etre verrouilles, et risquent done d'avoir ActiveX active : le filtrage au niveau 
du serveur mandataire (proxy). Ce filtrage passe generalement a la trappe tout fichier 
HTML ou JavaScript contenant le texte new ActiveXObject, ce qui a pour effet de 
supprimer le script entier ! Une portion significative, voire la totalite de votre logique 
applicative cote client est ainsi inutilisable. 

Les lecteurs d'ecran constituent egalement un point douloureux. Par essence, 
employer Ajax revient a mettre a jour une portion de la page plutot que l'ensemble de 
la page. Or, si l'ensemble des etudes et tests menes ces deux dernieres annees montre 
quelque chose, e'est bien que les lecteurs d'ecran sont encore tres rudimentaires pour 
tout ce qui touche aux pages dynamiques. 
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Outre une plethore de comportements denues d'un quelconque effort de standardisa- 
tion, pas un lecteur d'ecran aujourd'hui disponible ne reagit correctement a un change- 
ment soudain d'une portion de la page, quand bien meme cette portion serait a ce 
moment en cours de lecture, et en depit de nombreux efforts dans le script visant a aider 
le logiciel a s'y retrouver (on peut par exemple consulter les tests edifiants menes en mai 
dernier par James Edwards et d'autres sommites de l'accessibilite sur les sept principaux 
lecteurs du marche, sur http://www.sitepoint.com/article/ajax-screenreaders-work). 

Considerations ergonomiques 

Et quand bien meme tout va bien techniquement, la plus grande source de problemes 
est probablement au niveau de l'ergonomie des sites. D'ailleurs, faut-il parler de sites 
ou d'applications ? La nuance peut sembler futile, mais elle joue un grand role dans 
l'esprit de l'utilisateur et dans ses attentes quant a l'ergonomie que vous proposez. 

La plupart des internautes ont une association encore bien ancree dans leur esprit : 

navigateur = pages = site = interaction faiblarde 

Par opposition, on a aussi : 

application = ecrans = programme (local) = interaction riche 

Le terme application web (ou sa contraction webapp) ne suffisait pas a melanger ces per- 
ceptions jusqu'a recemment, puisque les applications en question conservaient le schema 
classique requete/chargement/reponse. Ajax et les frameworks JavaScript recents ont 
donne lieu a une nouvelle generation d'applications web, pour lesquelles une abreviation 
existe deja : RIA, Rich Internet Applications, terme sur lequel se fixent de plus en plus les 
efforts marketing du Web 2.0. II est vrai que Flash permettait de realiser des interfaces 
riches depuis longtemps, mais de facon proprietaire et, jusqu'a recemment, plutot res- 
treinte en termes de communications avec le serveur (Flex est en train de changer cela, 
ceci dit). Flash est aussi souvent plus lourd et moins accessible que l'alternative Ajax. 

Quoi qu'il en soit, tant que vos utilisateurs ne penseront pas a vos pages comme a une 
veritable application (et cela prendra du temps), ils n'auront pas les memes attentes. 
La ou il leur semble naturel, par exemple, de faire glisser une icone de document sur 
celle de la poubelle de leur bureau, ce meme comportement ne leur vient pour l'ins- 
tant pas a l'esprit lorsqu'ils sont dans un navigateur. 

Ce hiatus peut poser plusieurs problemes : 

• Lorsque vous declenchez une requete Ajax en arriere-plan, l'utilisateur ne percoit 
pas forcement qu'il y a une requete en cours... Du coup, il peut etre tente d'utiliser 
l'interface d'une facon inappropriee (quitter la page ou la recharger, effectuer une 
action ailleurs sur la page qui risque d'entrer en conflit avec le traitement du resul- 
tat de la premiere requete, etc.). 
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• Dans la meme serie, l'utilisateur ne s'attend pas a pouvoir utiliser des mecanismes 
comme le glisser-deplacer dans une page web, a moins qu'on rende cette possibi- 
lite evidente d'une fa9on ou d'une autre. 

• Les changements tees localises a la page ne sont pas forcement remarques. L'utili- 
sateur peut regarder son clavier en tapant ou avoir l'habitude plus ou moins cons- 
ciente d'utiliser le rechargement de la page comme signe que le traitement a eu 
lieu : faute de rechargement visible, il ou elle n'a pas forcement le refiexe d'exami- 
ner a nouveau le contenu. 

Utilisations pertinentes et non pertinentes 

Independamment des attentes de l'utilisateur, il existe des contextes dans lesquels 
utiliser Ajax est tout simplement contre-intuitif, voire contre-productif, ou avoir des 
effets de bord indesirables. 

Ainsi, on a deux types de pages dans une application web : les pages transitoires, 
dont l'etat n'a pas vocation a persister, et les autres. Avant Ajax, chaque etape d'un 
processus, quelle represente un etat transitoire ou un etat stable (qu'on pourrait vou- 
loir ajouter a ses marque-page ou dont on souhaiterait envoyer FURL a un ami), etait 
obtenu a l'aide d'un chargement de page. 

Le bouton Precedent (ou la touche associee), bien connu des internautes, et tees uti- 
lise notamment par les utilisateurs non avances, fonctionnait alors conformement a 
l'intuition : il nous ramenait a 1' etape precedente (peu importe que 1' application s'en 
offusque ou pas, ce nest pas le sujet). 

Mais si cette serie d'etapes passe a Ajax, il n'y aura pas de rechargement de la page 
d'une etape a l'autre : l'entree precedente dans l'historique de navigation reste la page 
visitee avant de demarrer le processus en question. Cela peut causer une confusion 
chez l'utilisateur, qui va naturellement cliquer Precedent s'il souhaite revenir a 1' etape 
precedente, pour se retrouver a la place plusieurs pages en amont dans sa navigation ! 

II convient done de bien examiner si les differentes etapes constituent un etat fonda- 
mentalement transitoire (par exemple des resultats de recherche, la saisie d'un commen- 
taire dans un blog, une validation de donnees), auquel cas Ajax est parfaitement accep- 
table, ou s'il ne serait pas preferable de recourir a une navigation plus traditionnelle. 

Cette distinction intervient aussi au niveau des URL des pages : s'il percoit la vue 
courante comme quelque chose de stable, qui pourra etre consultee ulterieurement, 
l'utilisateur peut vouloir en utiliser l'URL (pour un marque-page, pour l'envoyer a un 
ami, etc.). Dans un systeme Ajax, l'URL ne change evidemment pas tout au long des 
etapes, et l'utiliser plus tard nous amenera au debut du processus, ce qui sera la aussi 
source de confusion. 
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Enfin, gardez a l'esprit que pour la majorite des formulaires (inscription, modifica- 
tion de profil, etc.) leur envoi manuel, a l'aide d'un traditionnel champ de type 
submit ou image, est parfaitement justifie : faire passer ces formulaires en envoi Ajax 
a la volee empecherait l'utilisateur de l'explorer, de se faire une idee de sa saisie, ou 
d'interrompre sa saisie pour la completer ou la reprendre ulterieurement. Dans la 
mesure ou, la plupart du temps, vous ne fournissez pas de mecanisme d'annulation 
par la suite, un envoi force a la saisie serait percu comme une contrainte, une gene. 

Pratiques recommandees 

Void l'essentiel des recommandations pertinentes qu'on trouve aujourd'hui au sujet 
de l'emploi d'Ajax dans les applications web. Pour le reste, deux regies d'or : faire 
preuve de bon sens et se mettre reellement a la place de l'utilisateur novice, qui 
decouvre vos pages sans aucun a priori sur leur utilisation. 

Principes generaux 

Une regie de base, qui vaut pour toutes les pages, est de commencer par un fonction- 
nement traditionnel, sans JavaScript, reposant uniquement sur les elements actifs 
habituels : liens et formulaires. II ne faut pas pour autant perdre de vue qu'on va 
ensuite enrichir ce fonctionnement avec JavaScript et de l'Ajax, afin d'eviter notam- 
ment des erreurs de modularisation cote serveur. Mais en partant d'une conception 
100 % passive cote client, pour ensuite l'enrichir avec de YUnobstrusive JavaScript, on 
assure automatiquement une degradation elegante. 

Cette approche d'amelioration progressive (le terme anglais progressive enhancement a 
fait ecole) a trouve un nom bien a elle, lorsqu'elle s'applique a l'ajout d'un fonctionne- 
ment Ajax : Jeremy Keith, figure de proue de JavaScript et du DOM, l'a baptisee Hijax 
(http://www.domscripting.com/blog/display/4l). Je ne saurais trop vous recommander de 
proceder ainsi : le surcout en temps est minime, et les benefices sont enormes. 

Par exemple, l'application en ligne Backpack de 37 signaux (http://backpackit.com), en 
depit d'une interface tres riche et exploitant largement JavaScript, le DOM et Ajax, 
reste parfaitement utilisable sur des navigateurs textuels comme Lynx. GMail, en 
revanche, est d'une accessibilite tres discutable (http://www.chaddickerson.com/blog/ 
2005/10/18, puis choisissez l'unique article). 

Autre point general important : sur un site public, pensez a bien specifier des la page 
d'accueil que vous utilisez JavaScript et Ajax, et faites un petit expose sur les impacts 
ergonomiques. Cela aide grandement a ajuster convenablement les attentes de vos 
utilisateurs, et ameliore leur ressenti sur votre application. 
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Ergonomie et attentes de I'utilisateur 

• Pendant une requete Ajax, signifiez visuellement, de facon claire, qu'un traite- 
ment est en cours. Si certaines portions de l'interface pouvaient poser probleme 
pendant ce temps-la, desactivez-les, comme nous l'avons fait dans notre exemple 
de reponse XML au chapitre 5. 

• Si vous avez recours au glisser-deplacer, rendez la possibilite evidente, aussi claire 
que possible, et de preference a la fois textuellement et graphiquement. Et bien 
entendu, il doit y avoir une facon alternative, accessible, d'obtenir le meme resul- 
tat (de nombreux peripheriques ne permettront pas de simuler le glisser-deplacer, 
et les personnes souffrant d'un handicap moteur rendant l'usage de la souris diffi- 
cile auront le plus grand mal a utiliser le glisser-deplacer). 

• Lorsque vous venez d'ajouter ou de modifier un element de la page, mettez-le en 
exergue visuelle, par exemple avec un effet Highlight ou Pulsate (comme dans 
notre dernier exemple d'ajout de commentaires). Au cas ou la partie mise a jour 
ne serait pas a l'ecran (en raison d'un defilement, ou d'une bascule de I'utilisateur 
sur une autre application pendant le traitement), il existe aussi des techniques 
pour emettre un son. Par exemple, Campfire, une application de forums interac- 
tifs en ligne (http://campfirenow.com), emet un son discret mais reconnaissable 
lorsqu'un nouveau message arrive. 

• N'utilisez jamais Ajax pour envoyer une saisie automatiquement, a moins que cela 
soit le comportement general approprie a votre application (par exemple, dans le 
cas de Netvibes), ou qu'il ne s'agisse que d'une sauvegarde temporaire permettant 
une reprise ulterieure (a la Web Forms 2.0) ou une resistante a la panne (par 
exemple, dans un passage de QCM en ligne pour un examen). 

• Bien que je recommande plutot de recourir a une navigation traditionnelle quand 
le besoin est apparent, il existe un moyen de gerer le bouton Precedent et de fournir 
des URL adaptees a l'etat dans le cadre d'etats transitoires de pages utilisant Ajax. 
Voyez l'article de Mike Stenhouse : http://www.contentwithstyle.co.uk/Articles/38 

• Si vous souhaitez fournir a vos utilisateurs la possibilite d'acceder ulterieurement 
a un etat de votre page qu'ils ont obtenu par manipulation Ajax, vous pouvez tout 
a fait creer votre propre solution, avec l'ensemble des parametres necessaires dans 
FURL, comme le fait par exemple Google Maps avec son lien « Obtenir l'URL 
de cette page », en haut a droite de la carte. II vous appartient alors de mettre 
cette fonction bien en evidence. 

Cognitif/Lecteurs d'ecran 

• Tant pour les utilisateurs ayant des difficultes de concentration que pour ceux uti- 
lisant un lecteur d'ecran, il est preferable de declencher une requete Ajax manuel- 
lement, afin d'etre pret a examiner son resultat, que d'avoir des modifications 
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periodiques dont on ne decele pas toujours l'execution. 

Si vous utilisez un mecanisme de type Periodical Update r, il est alors intelligent 
de fournir une option, facilement accessible, permettant a l'utilisateur d'opter 
pour un declenchement manuel (un bouton ou un lien couple a un Update r classi- 
que, par exemple). Le choix pourrait etre propose en debut de page a l'aide d'une 
case a cocher, par exemple. 

• Pour les traitements Ajax consecutifs a la frappe (completion automatique, etc.) il 
vaut mieux eviter de declencher la requete immediatement : il est preferable 
d'attendre un bref intervalle d'inactivite, afin de laisser l'utilisateur taper aussi loin 
qu'il le souhaite, a sa vitesse de frappe normale. En effet, en l'interrompant a cha- 
que caractere ou presque avec une liste de suggestions, on ne reussit qua detour- 
ner sans cesse son attention et a augmenter, au final, son temps de saisie. 

• II peut etre interessant aussi de permettre a l'utilisateur d'etre explicitement averti 
d'une mise a jour d'une portion de la page suite a un traitement Ajax, a l'aide d'un 
message d'avertissement (alert) par exemple. Cette technique a l'avantage 
d'amener automatiquement 1' attention de l'utilisateur et le focus de l'eventuel lec- 
teur d'ecran sur la notification, tout en restaurant ensuite le focus de ce meme lec- 
teur d'ecran la ou l'utilisateur lisait auparavant. 

Pensez a rendre le message explicite, avec un contexte clair : preferez « Le nombre 
d'inscrits est desormais 430 » ou « Votre commentaire est desormais present en 
fin de liste » a « Operation reussie »... 

Enfin, il doit bien sur s'agir d'une option, car elle generait les utilisateurs n'en 
ayant pas besoin. Par ailleurs, il ne s'agit pas forcement d'une panacee : certains 
lecteurs d'ecran ne liront pas automatiquement le texte du message ! 

• Dans le cas precis des lecteurs d'ecran, dans la mesure ou, on l'a vu, certains 
gerent a peu pres JavaScript, mais aucun ne reagit correctement a une modifica- 
tion partielle due a Ajax, la meilleure solution peut etre d'offrir a l'utilisateur la 
possibilite de desactiver purement et simplement Ajax. II ne s'agit pas de lui 
demander de manipuler les options du navigateur, mais bien de cocher par exem- 
ple une case, qui ajustera le fonctionnement de vos scripts et basculera done sur 
une navigation traditionnelle. Si vous avez developpe facon Hijax, comme vu plus 
haut, e'est facile a implemented 

Pour conclure, voici quelques articles particulierement interessants sur l'implementa- 
tion d'une utilisation degradable d'Ajax et l'utilisabilite des formulaires qui y ont 
recours : 

• http://adactio.com/journal/959 

• http://particletree.com/features/the-hows-and-whys-of-degradable-ajax/ 

• http://particletree.com/features/degradable-ajax-form-validation/ 

• http://www.baekdal.com/articles/usability/usable-XMLHttpRequest/ 
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Autres frameworks reconnus 

Nous avons concentre nos efforts autour des deux frameworks de premier plan dans 
l'univers Web 2.0 : Prototype et script.aculo.us. Mais il en existe de nombreux autres. 
Bien entendu, l'engouement actuel pour le phenomene Web 2.0 implique une quan- 
tite importante de sorties sans beaucoup d'avenir ou de qualite. 

Neanmoins, on trouve certains frameworks assez repandus et de bonne qualite, dont 
l'approche est parfois tres differente de celles que nous avons etudiees. II vous appar- 
tient de verifier l'etendue de leur compatibilite en termes de navigateurs : si la plupart 
prennent en charge MSIE, Safari et les navigateurs bases sur Gecko, tous ne fonc- 
tionnent pas totalement sur Opera et Konqueror, par exemple. 

Void, a mon sens, les trois principaux frameworks supplementaires qui tirent leur 
epingle du jeu : 



Dojo 



Ce framework Open Source (double licence AFL et BSD) est un poids lourd 
(3,4 Mo avec les exemples) architecture en paquets (au sens Java du terme), et ambi- 
tionne de couvrir les besoins avances des applications DHTML. II fournit done une 
bibliotheque de widgets (composants graphiques, avec des interfaces toutes pretes 
vers Yahoo! Maps, Google Maps, del.icio.us, etc.), et des modules pour travailler 
avec Ajax, le glisser-deplacer, les entrees/sorties, l'animation, la journalisation, etc. II 
dispose d'une bonne documentation en ligne, de listes de diffusion et d'un wild 
documentaire. 

Version actuelle : 0.3.1. Site officiel : http://dojotoolkit.com 



Mochikit 



Ce framework fournit un ensemble de modules couvrant les fonctions classiques : 
Ajax, facilitation de JavaScript, iterateurs, manipulation avancee du DOM, glisser- 
deplacer, journalisation et effets visuels, mais aussi beaucoup de possibilites sur la 
gestion des couleurs (facon CSS3), un systeme de gestion evenementielle de type 
signaux, et quelques utilitaires autour des dates et heures et du formatage numerique. 

Version actuelle : 1.3.1. Site officiel : http://www.mochikit.com 



Open Rico 



Base sur Prototype, ce framework fournit bien sur des fonctions Ajax et de glisser- 
deplacer ainsi que certains effets visuels (deplacement, redimensionnement et fondu, 
mais aussi un mecanisme portable de coins arrondis, typique du Web 2.0), ainsi que 
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des « comportements » {behaviors), c'est-a-dire des composants graphiques de plus 
en plus repandus : un menu accordeon (http://openrico.org/rico/demos.page? 
demo=rico_accordion) et des tableaux a chargement dynamique, similaires aux 
DataCridsdeASP.NET. 

Version actuelle : 1.1.2. Site officiel : http://openrico.org 



Pour aller plus loin... 

Site 

Nous l'avons cite tres souvent, le site officiel de script, aculo.us est contient de tres 
nombreuses documentations et exemples : http://script.aculo.us 

Groupe de discussion 

Le groupe Google RubyOnRails-Spinoffs a ete cree en aout2006 pour servir de 
centre d'aide technique, avec les avantages d'indexation et de recherche de Google. 
On y trouve des personnes de bon niveau, et Thomas Fuchs lui-meme. http:// 
groups.google.com/group/rubyonrails-spinoffs 

Canal IRC 

Enfin, il faut noter qu'on trouve souvent une reponse rapide et fiable sur le canal IRC 
dedie a script.aculo.us, heberge sur l'incontournable serveur irc.freenode.net. Le 
canal se nomme tout simplement #scri ptacul ous. 



Troisieme Partie 




Interagir avec le 
reste du monde 



Pour decouvrir et maitriser Ajax, nous avons eu recours a une couche serveur locale, 
facile a personnaliser pour nos tests. Dans le developpement de vos applications, 
vous allez generalement utiliser un service qui vous est propre, heberge sur vos 
serveurs : c'est une situation similaire. 



Pourtant, la puissance du Web 2.0 tient aussi largement a l'interoperabilite des ser 
vices et a la possibilite pour une page de recouper des informations d'origines 
diverses et d'exploiter des services fournis par des tiers. 

Nous nous interesserons a deux grandes categories d'interactions. 

Au chapitre 8, nous examinerons les fameux services web, tant ceux proposes au 
travers d'une interface SOAP (vous aurez alors besoin de votre couche serveur pour 
agir comme intermediate, ce protocole complexe n'etant pas pris en charge par des 
objets JavaScript), que ceux proposes au travers d'interfaces REST. Ces derniers 
sont de plus en plus frequents, et peuvent etre attaques directement par vos pages, 
ce qui est un avantage significatif dans bien des cas ! 

Le chapitre 9 se penchera sur la syndication de contenus, principalement au travers des 
deux formats de flux dominants : RSS 2.0 et Atom 1.0. II s'agit de documents XML ; 
vous pouvez done les recuperer directement depuis votre page pour les manipuler et 
creer dynamiquement du contenu. C'est ce que font, par exemple, certains agregateurs 
en ligne. On peut aisement imaginer un portail personnalise agissant de meme. 

Grace a ces perspectives, vous pouvez rendre vos pages plus riches en contenu, en 
possibilites et en interet. Et peut-etre, si ce n'est deja fait, realiserez-vous que dans 
le Web 2.0, l'interoperabilite n'est pas un vain mot. 



" 
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Services web et REST : 
nous ne sommes plus seuls 



Les services web etaient censes permettre a n'importe quel logiciel de communiquer 
par Internet avec n'importe quel autre, quels que soient leurs langages de program- 
mation respectifs. 

La promesse nest que peniblement tenue, au point qu'une sorte de retour aux sources 
s'est opere, qui a decouvert des tresors dans ce bon vieux protocole HTTP, et ne voue 
plus necessairement un culte a XML. On fait maintenant des API REST et on tend 
meme a les preferer a leurs equivalents SOAR 

Nous verrons dans ce chapitre a quoi correspondent ces technologies. Apres avoir 
apercu les horizons qu'elles nous ouvrent, nous realiserons quelques exemples con- 
crets, toujours au travers dAPI REST, pour discuter avec Amazon.fr, The Weather 
Channel et Flickr. 
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Pourquoi la page ne parlerait-elle qu'a son propre site ? 

Tout simplement pour des raisons techniques. Conceptuellement, il est parfaitement 
acceptable que votre page federe du contenu quelle obtient dynamiquement depuis des 
services heberges sur d'autres serveurs. C'est fondamentalement le role des services web. 

Du temps des services web « classiques » (avec leurs deux tonnes nominales de 
SOAP pour dire bonjour), personne n'aurait ose imaginer que les communications 
allaient avoir lieu directement depuis la couche client. Cela aurait pourtant ete for- 
midable de decharger votre serveur. Cependant, SOAP est tellement complexe que 
c'etait inimaginable, a moins de recourir a Flash, a une applet Java ou, sur MSIE, a 
un ActiveX (au prix d'une damnation eternelle). 

Imaginez un peu les possibilites... Aujourd'hui, tout service digne de ce nom fournit 
des services web, et de plus en plus souvent une API REST (les services tres a la 
pointe hoffrent d'ailleurs que REST). Regardez Netvibes : tout le contenu de la page 
et tous les services viennent de l'exterieur. Des pages de portail personnalise, comme 
Google IG, sont entierement basees sur ce concept. 

Contraintes de securite sur le navigateur 

Seulement voila, les possibilites, vous n'etes pas les seuls a les imaginer. Des per- 
sonnes aux intentions moins honorables pourraient s'en servir pour contourner des 
mesures classiques de securite. 

Imaginons par exemple que vous etes sur votre poste en entreprise. Vous avez acces a 
l'intranet, lequel contient sans doute des informations confidentielles. Vous avez 
aussi acces a Internet, bien entendu. Et la, vous accedez a une page dotee d'un script 
qui tente de recuperer des informations sur http: //intranet/... pour ensuite les 
transmettre a un site distant. Vous imaginez la suite ! 

C'est pour cette raison que sur certains navigateurs, JavaScript interdit l'acces a 
d'autres domaines que celui dont la page est issue. II peut s'agir d'un script issu d'un 
domaine A tentant de manipuler les fonctions ou variables d'un autre script (fourni 
par un frame ou un if rame) issu d'un domaine B. Dans le cas qui nous occupe ici, il 
s'agit d'un objet XMLHttpRequest qui n'a pas le droit de communiquer avec un 
domaine tiers. 

Suivant le navigateur, cette contrainte est plus ou moins prononcee. II est souvent 
possible d'acceder a un domaine parent. Par exemple, un script execute par une page 
de intranet.example.com peut avoir acces aux ressources de example.com. C'est la 
fameuse exception a la Same Origin Policy, qui remonte a Netscape Navigator 2.0 (ce 
qui ne nous rajeunit pas). On utilise pour cela l'attribut DOM proprietaire 



Services web et REST : nous ne sommes plus seuls 

Chapitre 8 

document . domai n. Vous trouverez une explication plus detaillee de la S.O.P. a la page 
suivante : http://www.mozilla.org/projects/security/components/same-origin.html. 

Certains navigateurs ne mettent en place aucune restriction, par exemple MSIE (qui 
n'est pas a une faille de securite pres, il faut dire). 

En revanche, les navigateurs Mozilla (Mozilla, Firefox et Camino) sont tres stricts. 
Pour desactiver cette limitation, il faut fournir le script en tant que script signe. II est 
aussi possible de configurer specialement votre navigateur de developpement pour 
eviter cela pendant les tests (mais cela ne remplace pas la signature pour le deploie- 
ment en production). 

Vous trouverez tous les details sur http://developer.mozilla.org/en/docs/Security, mais 
sincerement, le jeu n'en vaut pas la chandelle : en production, cela ne marchera pas, en 
tout cas pas assez pour XMLHttpRequest. L'internaute qui utilise vos pages n'a proba- 
blement pas effectue ces reglages (il n'en a peut-etre pas besoin s'il utilise un naviga- 
teur moins securise). Le seul moyen de fournir une page utilisant ces droits etendus a 
un tiers inconnu consiste a fournir la page et ses scripts comme une archive signee. 

Outre le fait que cela necessite un certificat apte a signer du code (ce n'est pas tou- 
jours le cas des certificats utilises pour HTTPS) et qu'il faut ensuite utiliser un outil 
specifique (SignTool) a chaque mise a jour du contenu de l'archive, cela change radi- 
calement la facon d'invoquer la page depuis le reste du site (FURL a l'aspect suivant : 
jar:http://www.example.com/truc.jar!/page.html). Du coup, c'est incompatible avec les 
autres navigateurs... 

Une « couche proxy » sur votre serveur 

La seule solution veritablement portable, qui a de surcroit l'avantage de ne rien 
demander a l'utilisateur, consiste a mettre en place une couche intermediate sur 
votre serveur, qui se contente d'effectuer la requete qu'on lui donne, et de transmettre 
le resultat tel quel a votre script. C'est ce precede que nous utiliserons au cours de ce 
chapitre. En effet, notre couche serveur n'est pas soumise aux contraintes de securite 
du navigateur : elle peut emettre des requetes ou bon lui semble (tant que les routeurs 
laissent passer, en tout cas). 

II existe tout de meme une difference entre l'utilisation d'une simple fonction de 
proxy et le modele traditionnel de traitement sur la couche serveur. Ici, le traitement 
est fait cote client : c'est plus leger pour le serveur, qui n'est qu'entremetteur, et cela 
ouvre des possibilites d'extensions pour vos pages, sur le meme principe que les 
extensions Firefox. 
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Architecture de nos exemples 

Nos trois exemples pour ce chapitre suivront tous le meme principe, mais avec divers 
degres de complexite et de raffmement. L' architecture fondamentale est la suivante : 

• Notre page a besoin d'un document XML ends par un service tiers. 

• Ne pouvant y acceder directement, elle passe par une fonction « proxy » proposee 
par notre couche serveur. C'est vers cette fonction que notre requete Ajax s'effectue. 

• Le document obtenu est generalement trop complexe pour une extraction manuelle 
a l'aide des proprietes DOM ; on passera done soit par une extraction XPath 
(comme nous l'avons deja fait au chapitre 5), soit directement par une feuille de sty- 
les XSLT, pour obtenir un fragment XHTML representant les informations qui 
nous interessent. 

Peut-etre n'avez-vous jamais eu l'occasion d'utiliser XSL ou XSLT ? Labreviation 
XSL signifie extensible Stylesheet Language. C'est la principale technologie de mise 
en forme d'un contenu XML, avec CSS. Cependant, la ou CSS ne fait que realiser 
une mise en forme a destination d'un media (imprimante, ecran, video-projection), 
XSL ouvre beaucoup plus de possibilites. 

On considere traditionnellement que XSL est compose de deux technologies : XSL-FO 
{Formatting Objects, finalisee en 2001), une architecture permettant de realiser des adap- 
tateurs pour des formats specifiques (le cas le plus courant etant PDF), et XSLT 
{Transform, finalisee en 1999), qui transforme le document source en un document 
quelconque, le plus souvent balise lui aussi (XHTML, SVG, MathML...), bien que rien 
ne l'exige. Dans les deux cas, XSL utilise XPath pour extraire les donnees souhaitees du 
document XML source. 

Afin de realiser des extractions XPath et des transformations XSLT directement 
dans nos pages web, nous allons recourir encore une fois a Google AJAXSLT. En 
effet, la prise en charge de ces technologies par les navigateurs, et surtout leur acces- 
sibilite par JavaScript, sont tres heteroclites. 

Vous trouverez davantage d'informations sur XSL, XSL-FO et XSLT aux adresses 
web citees en fin de chapitre. Les feuilles XSLT utilisees dans ce chapitre ne sont pas 
tres compliquees. 

Comme toujours, les exemples complets sont dans 1' archive des codes source. 
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Comprendre les services web 

Le terme « service web » est apparu il y a quelques annees pour designer un meca- 
nisme « portable » de communication entre objets distants, une categorie de logiciels 
appeles ORB {Object Request Broker) . 

Les technologies ORB traditionnelles, CORBA, DCOM et RMI, se revelaient en 
effet insatisfaisantes pour la majorite des besoins. On leur reprochait en effet souvent 
les points suivants : 

• Elles sont attachees a certains langages ou a des plates-formes particulieres, en 
depit d'efforts ulterieurs de portabilite. 

• Elles utilisent un format proprietaire et binaire de transfert (debogage complexe). 

• Elles utilisent le reseau d'une facon parfois trop complexe ou trop lourde a gerer 
(ports proprietaires necessitant des configurations de routeurs, maintien de con- 
nexion et maintien d'etat, etc.). 

• Elles necessitent la generation, souvent statique (a la compilation, pas a 1' execu- 
tion), de classes intermediates {skeletons et stubs). 

• Elles necessitent un referentiel centralise des objets disponibles, ainsi parfois 
qu'un referentiel des objets actifs. 

En depit des performances souvent elevees offertes par ces technologies, leur mise en 
oeuvre etait jugee trop complexe pour de nombreux cas, et surtout recelait toujours 
des difficultes de portabilite et de maintenance. 

Les services web devaient initialement reposer sur un format et un protocole ouverts, 
stables, robustes et bien maitrises : XML et HTTR On a aussi souhaite des le depart 
eviter toute gestion d'etat au niveau du protocole, afin de conserver les principaux 
avantages de HTTP : la capacite a monter facilement en charge, et la tolerance a la 
panne courte. Un format base sur XML devait permettre la description d'un service : 
WSDL {Web Service Description Language). Le protocole dedie aux services devait 
done etre simple, portable, et facile a mettre en ceuvre. On le baptisa SOAR pour 
Simple Object Access Protocol. 

Helas, l'univers des standards WS {Web Services) a tenement enfle, et l'effet Design 
By Committee a tellement engendre de complexite, que cet acronyme est devenu une 
vaste farce. D'ailleurs, la version 1.2 de SOAP l'a officiellement retire. SOAP est 
devenu SOAP, qui n'est plus un acronyme. Le protocole est en effet devenu atroce- 
ment complexe (avec l'ajout de possibilites d'utilisation de SMTP ou XMPP au lieu 
de HTTP, les pieces jointes, etc.), et entoure d'une plethore d'autres formats et 
protocoles : UDDI pour les referentiels de services, et les WS-*, de plus en plus 
honnis, qui ne cessent de fleurir (WS-Addressing, WS-Security, WS-ReliableEx- 
change, etc.). Le W3C compte six groupes de travail distincts sur le sujet ! 
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Le resultat d'une telle surenchere est un schisme classique. D'un cote, on trouve les 
poids lourds de l'industrie, qui ont consacre des millions au developpement de pro- 
duits et services bases sur ces technologies, et les poussent en avant afin de recuperer 
leur investissement (sur ce point, les courriels circulant dans les listes de diffusion des 
membres du W3C sont edifiants). Dans le meme camp, on trouve tous les projets a 
gros budget dont les directeurs techniques ont succombe au chant de sirene des poids 
lourds en question. 

De l'autre cote, on a, comme d'habitude, le camp des partisans d'un developpement 
agile, rapide, flexible, souple, et neanmoins performant. C'est le camp de ceux qui 
ont mis de cote XHTML 2.0 et XForms au profit des alternatives « XHTML 5 » 
(http://whatwg.org/specs/web-apps/current-work/) et Web Forms 2.0 (http:// 
whatwg.org/specs/web-forms/current-work/) ; le camp de ceux qui preferent Ruby On 
Rails a l'univers J2EE... le camp, enfin, qui a propose REST comme alternative au 
dogme « WS-* ». 



Qu'est-ce qu'une API REST ? 



REST est l'acronyme de REpresentational State Transfer. Ce terme en soi est particu- 
lierement malheureux, car il ne renseigne en rien sur la nature concrete de l'approche. 
Fournir une API REST sert le meme objectif que fournir une API SOAP : permettre 
a des codes externes de dialoguer avec notre service, de facon portable et robuste. 
Dans les deux cas, on se repose sur HTTP. Cependant, la similitude s'arrete ici. 

Dans une API REST, Implication est exposee sous forme de ressources : un ges- 
tionnaire d'utilisateurs, un compte utilisateur, un tableau de bord, un memo, une 
tache a faire, une liste des fichiers joints, etc. Chaque ressource est accessible au tra- 
vers d'une URL unique, utilisee pour tout : liens vers la page concernee, demande de 
modification, de suppression, etc. 

Chaque ressource fournit une interface d'acces uniforme, constituee principalement 
de deux aspects : 

• une serie d'operations correspondant a des verbes HTTP (principalement POST, 
GET, PUT et DELETE, qui correspondent aux operations de creation, de lecture, de 
mise a jour et de suppression, ce qu'on appelle classiquement CRUD : Create, 
Read, Update, Delete) ; 

• une serie de types de contenus MIME, en requete comme en reponse. Ceux en 
requete offrent juste plus de souplesse quant au format de transfert des parame- 
tres, tandis que les types de reponse attendus peuvent changer radicalement la 
nature de la reponse fournie par la ressource. 
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REST constitue une approche client/serveur sans gestion d'etat (en tout cas, pas par 
le protocole : comme en HTTP classique, l'utilisation de cookies ou d'un equivalent 
peut simuler l'etat). Sa simplicite permet aussi l'utilisation pertinente d'un systeme 
de cache, ou l'enrobage dans des couches supplementaires (par exemple une couche 
d'authentification). 

L'avantage majeur de REST est sa simplicite, et la facilite avec laquelle une applica- 
tion web classique peut fournir une API REST rien qu'en prenant en charge quel- 
ques verbes HTTP supplementaires dans sa couche serveur lorsque c'est pertinent. 

II est tout simplement impensable d'avoir un client SOAP en JavaScript : le code 
resultant serait bien trop lourd ; il faudrait recourir a un objet natif non standard, une 
applet Java ou, sur MSIE, un controle ActiveX. 

En revanche, avoir un client REST est trivial avec XMLHttpRequest, au moins pour 
les verbes GET et POST. Les verbes suivants ne sont pas toujours pris en charge, mais le 
standard W3C en cours de finalisation les prevoit explicitement. 

REST est done en train de gagner de plus en plus de points dans 1' opinion des deve- 
loppeurs (ce qu'on appelle en anglais la developer mindshare). La preuve : les API de 
gros services (Amazon, eBay, Yahoo!, Flickr, etc.) non seulement offrent du SOAP et 
du REST, mais mettent souvent l'accent sur REST, voire ne proposent que du REST ! 
Dans la meme veine, le framework d'applications web Ruby on Rails, repute pour son 
agilite, integre REST au cceur de son architecture a partir de sa version 1.2, de facon 
presque transparente (« Pour toute application developpee, une API offerte ! »). 

Nous utiliserons done, dans ce chapitre, exclusivement des API REST. 



Cherchons des livres sur Amazon.fr 

Pour notre premier cas concret, prenons une API particulierement connue : celle 
d'Amazon. LAPI est la meme quel que soit le site utilise (US, UK, France, Alle- 
magne, etc.), mais certaines operations ne sont pas disponibles partout. Nous utilise- 
rons l'operation la plus courante : la recherche d'elements. Pour etre plus precis, nous 
allons nous specialiser sur la recherche de livres. 

A l'instar de nombreux fournisseurs de services, Amazon exige un enregistrement 
prealable pour pouvoir utiliser son API : cet enregistrement va vous fournir une cle 
API, que vous devrez indiquer a chaque requete au service. 

Certaines API Amazon sont a utilisation payante, mais celle dont nous avons besoin 
ici est gratuite, dans la limite toutefois d'une requete par seconde (ce qui est large- 
ment suffisant pour les besoins de cet exemple !). 
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Commencez par vous faire un repertoire de travail, par exemple amazon. 

Obtenir une cle pour utiliser I'API 

Le portail des API Amazon presente l'ensemble des API disponibles, leurs mises a 
jour, etc. II est sur http://www.amazon.com/gp/browse.html?node=3435361 . On trouve 
egalement toutes les informations techniques, pour les developpeurs, sur http://deve- 
loper.amazonwebservices.com/connect/kbcategory.jspa?categorylD=5. 

1 Sur la page portail, suivez le lien central Create (etape 1). Vous avez alors le choix 
entre associer votre compte Amazon Web Services avec un compte client existant, 
ou creer un compte dedie. 

2 Supposons le second cas : saisissez une adresse courriel valide pour vous, et 
cochez l'option No, I am a new customer. Puis actionnez le bouton Continue. 

3 Saisissez votre nom, confirmez l'adresse courriel et saisissez puis confirmez un 
mot de passe. Actionnez le bouton Continue. 

4 Saisissez les informations demandees (oui, il y en a beaucoup, mais a notre con- 
naissance, Amazon respecte bien la confidentialite...). Pour la section State, Pro- 
vince or Region, mettez par exemple F. 

5 Prenez soigneusement connaissance des termes de la licence d'utilisation, en par- 
ticulier la section 7A, qui concerne 1API E-Commerce Service (ECS), que nous 
utiliserons. Pour l'essentiel, en-dehors des dispositions classiques (s'abstenir d'uti- 
liser des logos ou marques de partenaires Amazon, d'utiliser les donnees obtenues 
pour du marketing direct ou du spam, de modifier du contenu graphique fourni 
par Amazon, sauf pour redimensionnement...), il s'agit de se limiter a une requete 
par seconde et par IP, et de ne pas envoyer de fichiers superieurs a 40 Ko... 

6 Cochez la case indiquant votre acceptation de la licence et actionnez le bouton 
Continue. 

7 Et voila ! Vous allez recevoir un e-mail a l'adresse que vous avez fournie, en gene- 
ral en moins de deux minutes, intitule Welcome to Amazon Web Services. Vous y 
trouverez un lien d'obtention de cle. Cliquez dessus. 

8 Vous arrivez sur une page d'authentification. Saisissez l'adresse e-mail associee a 
votre compte et votre mot de passe. Actionnez le bouton Continue. 

9 Vous y voila ! Sur la droite de la deuxieme section, vous voyez s'afficher vos deux 
identifiants personnels : la cle API (Your Access Key ID) et la cle secrete (Your Secret 
Access Key), qui ne s'affiche qu'apres que vous avez clique sur le lien Show. Cette 
cle secrete est necessaire pour « signer » certaines operations de l'API. Nous n'en 
aurons pas besoin dans ce chapitre. 

10 Copiez-collez soigneusement la cle API dans un endroit facile d'acces, comme un 
fichier texte dans votre repertoire de travail. 
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L'appel REST a Amazon.fr 

Voyons a present l'anatomie de notre interaction avec le service. 

Anatomie de la requete 

Notre requete utilise le verbe GET (celui des liens et des saisies manuelles dans la barre 
d'adresse), sur une ressource centrale pour Amazon Web Services, identifiee par 
FURL suivante : 



I http://webservices.amazon . fr/onca/xml 



Nous devons fournir deux parametres fondamentaux : 

1 L'API utilisee, avec le parametre Service. Dans notre cas, on indiquera 
AWSECommerceServi ce. 

2 Notre cle API, avec le parametre AWSAccessKeyld. 

Par ailleurs, puisque nous travaillons avec ECS, nous devons fournir un parametre 
supplemental : 

3 L'operation qui nous interesse, avec le parametre Operation. Pour des recherches 
d'elements a la vente, on specifie ItemSearch. 

Cette operation a de nombreux parametres pour affiner les resultats, qui sont tous 
decrits dans la documentation de l'API, a savoir dans le cas qui nous occupe : 
http://docs.amazonwebservices.com/AWSEcommerceService/2006-06-28/ApiReference/ 
ltemSearchOperation.html. 

Sur les quelque 30 parametres possibles (dont certains sont specifiques a un type de 
produit, par exemple DVD), il y a seulement deux parametres incontournables : 

4 Searchlndex, qui precise le type de produit recherche. Dans notre cas, on utilisera 
Books ou ForeignBooks. 

5 Keywords, qui contient la « saisie de l'utilisateur », done les mots-cles a utiliser 
pour la recherche. 

Un parametre tees important est Res ponseC roup, qui precise les ensembles d'informa- 
tions qu'on veut recuperer. II existe 24 groupes possibles, certains etant une combi- 
naison des autres. La valeur par defaut combine Request (qui nous renvoie le detail de 
notre requete, pour validation) et Smal 1 (la plus petite combinaison, qui ne fournit pas, 
par exemple, les prix ou les numeros ISBN, encore moins les images de couvertures). 

Cela ne nous suffisant pas, nous definirons : 

6 ResponseCroup a Medium. 

Cette combinaison Medium ajoute auxvaleurs par defaut (titre, auteurs et contributeurs, 
etc.) les groupes ItemAttributes (n° ISBN, nombre de pages, dimensions, informa- 
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tions de publication et de fabrication...), OfferSummary (tarifs proposes), SalesRank 
(position dans les ventes), Editorial Review (generalement constitue de la 4 e de cou- 
verture et d'un ou deux extraits d'articles de presse) et Images (vignettes de couverture). 

Void done un exemple d'URL (forcement tres longue) pour une recherche « RSS 
Atom » en livres francais. La valeur API KEY est a remplacer par votre propre cle. 

http://webservices.amazon.fr/onca/ 

xml?Service=AWSECommerceService&AWSAccessKeyld=APIKEY&Operation=ltemSearch 

&Searchlndex=Books&Keywords=RSS%20Atom&ResponseGroup=Medium 

Remarquez l'encodage URL de « RSS Atom », qui donne RSS%20Atom. 

Allez-y, essayez-la dans votre navigateur : vous allez recuperer un document XML. 
Nous vous conseillons d'utiliser Firefox, qui l'affichera autrement mieux que MSIE, 
par exemple. En repliant certains nceuds du document XML resultat, on obtient 
l'affichage de la figure 8-1, qui permet de voir l'essentiel. 



Figure 8-1 

Une portion de notre document 
XMLderesultats 
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Le document XML de reponse 

Le noeud racine est ItemSearchResponse. Un nceud fils Items contient le nombre 
total de resultats et de pages, puis un noeud fils Item par resultat. 

Chacun de ces noeuds Item propose entre autres : 

• FURL Amazon.fr du livre (Detai 1 PageURL) ; 

• la position dans les ventes (SalesRank) ; 

• l'URL d'une vignette de taille moyenne (URL dans Medi umlmage) ; 

• un element de details, ItemAttributes, avec entre autres : 

• le titre (Ti tl e) ; 

• l'auteur ou les auteurs (Author) ; 

• les eventuels contributeurs, traducteurs... (Creator) ; 

• le numero ISBN (ISBN) ; 

• le nombre de pages (NumberOf Pages) ; 

• la reliure (Binding) ; 

• les dimensions (itemDimensions et ses fils Height, Length et et Width) ; 

• le prix editeur (Li stPri ce) ; 

• Fediteur (Pub! i sher) et la date de sortie (Pub! i cati onDate) ; 

• le plus bas prix Amazon.fr (LowestNewPrice ou LowestUsedPrice dans 
OfferSummary). 

II nous appartient d'extraire ces informations et de les afficher agreablement. Ce sera 
le travail d'une feuille XSLT. Cependant, ne mettons pas la charrue avant les boeufs, 
et commencons par construire une page de recherche Amazon.fr ! 

Notre formulaire de recherche 

Commencons par notre formulaire de recherche. Dans la meilleure tradition de 
Famelioration progressive, garante d'accessibilite, nous allons realiser un formulaire 
classique. Bon, idealement, sa cible serait une action sur notre couche serveur qui 
recupererait le contenu, le formaterait, etc. Ici pour simplifier, nous utiliserons direc- 
tement FURL de la ressource cible chez Amazon.fr. 

Notre JavaScript interceptera Fenvoi du formulaire pour utiliser plutot Ajax, et rea- 
liser une transformation cote client du XML recupere. 

Nous aurons ici une maigre couche serveur (juste un proxy de telechargement), aussi 
utiliserons-nous notre structure habituelle : un repertoire doc root pour le contenu 
client, et le serveur au meme niveau. 



Interagir avec le reste du monde 

Troisieme partie 



Dans le repertoire docroot, nous allons creer notre page HTML et sa feuille de style. 
Void index.html. 

Listing 8-1 Notre formulaire de recherche Amazon.fr 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xm"lns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

*■ charset=iso-8859-15" /> 
<title>Recherche Amazon (E-Commerce Service)</title> 
<link rel="stylesheet" type="text/css" href="client .css"x/script> 
<script type=" text/ javascript" src=" prototype. js"x/script> 
<script type=" text/ javascript" src=" client. js"x/script> 
</head> 
<body> 

<hl>Recherche Amazon (E-Commerce Service)</hl> 

<form id="searchForm" method="get" 

acti on="http : //webservi ces . amazon . f r/onca/xml "> 

<P> 

<input type="hidden" name="Service" value="AWSECommerceService" /> Q 
<input type="hidden" name="AWSAccessKeyId" value="..." /> 
<input type="hidden" name="Operation" value="ItemSearch" /> 
<input type="hidden" name="ResponseGroup" value="Medium" /> 
<label for="cbxIndex" accesskey="C">Categorie</label> 
<select id="cbxlndex" name="SearchIndex" size="l" tabindex="l"> Q 
<option value="Books">Livres en fran<;ais</option> 
<option value="ForeignBooks">Livres en V0</option> 
</select> 

</p> 

<P> 

<label for="edtKeywords" accesskey="M">Mots cles</label> 

<input type="text" id="edtKeywords" name="Keywords" tabindex="2" /> 

</p> 

<P> 

<input type="submit" id="btnSearch" value="Chercher !" tabindex="3" /> 

</p> 
</form> 

<div id=" indicator" style="di splay: none;"x/div> 

<div id="results"x/div> Q 

</body> 
</html> 
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A partir de la ligne Q, vous voyez la liste des parametres que nous avons detailles 
plus tot. Evidemment, vous preciserez votre propre cle pour le parametre 
AWSAccessKeylD. II existe deux parametres manipulables ici par lutilisateur : le 
type d'element recherche (livre en francais ou livre en V.O.), et bien entendu les 
mots-cles de recherche. A Tissue de la recherche et du formatage du resultat, nous 
injecterons le fragment XHTML obtenu dans le conteneur d'lD results 0. 

Histoire que tout ceci soit un peu plus joli, nous allons y coller une feuille CSS. 
Listing 8-2 Une petite feuille de style pour y voir plus clair 

body { 

font-family: sans-serif; 
} 

hi { 

font-size: 150%; 
} 

/* FORMULAIRE */ 

form#searchForm { 

border: 0.5em solid #888; 

background: #ddd; 

width: 60ex; 

padding: 0.5em; 
} 

form#searchForm p { 

position: relative; 

height: 2.2em; 

margin: 0; 
} 

#edtKeywords , #cbxlndex { 

font-family: serif; 

position: absolute; 

left: 14ex; 
} 

#edtKeywords { 

width: 45ex; 
} 

#indicator { 

margin-top: lem; 
height: 16px; 
color: gray; 
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} 



font-size: 14px; 

line-height: 16px; 

background: url (spinner.gif) no-repeat; 

padding-left: 20px; 



Ce formulaire (figure 8-2) doit deja fonctionner tel quel : si vous saisissez une 
recherche et validez, vous devez obtenir un document XML Amazon.fr en reponse. 
Encore une fois, certains navigateurs, par exemple Firefox, affichent le XML de 
facon plus pratique que d'autres. 



Figure 8-2 

Notre formulaire de recherche 
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Passer par Ajax 



Interceptons maintenant l'envoi normal du formulaire pour passer plutot par Ajax. 
Pour ce faire, il va toutefois nous falloir une couche serveur jouant le role de proxy. Et 
en vertu de la Same Origin Policy, nous devrons acceder a notre page au travers de 
cette meme couche serveur. 



La couche serveur, intermediate de telechargement 

Cela nous donne un serveur plutot simple, sans rien de nouveau par rapport aux pre- 
cedents. Nous avons juste factorise le code pour qu'il detecte automatiquement la 
presence d'un serveur proxy entre votre poste et Internet, a l'aide de la variable 
Linux/Unix habituelle http_proxy. Sous Windows, vous aurez besoin, avant de le 
lancer, de definir une variable adaptee. Par exemple, pour un proxy HTTP 
proxy.maboite.com, sur le port 3128. 

I set http_proxy=http://proxy.maboite. com: 3128 
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Voici le code de serveur. rb, juste au-dessus de votre repertoire doc root. 
Listing 8-3 Le code de notre serveur « proxy de telechargement » 

#! /usr/bin/env ruby 

require 'net/http' 

requi re ' uri ' 

require 'webrick' 

include WEBrick 

server = HTTPServer. new (: Port => 8042) 

server .mount('/' , HTTPServlet: : FileHandler , './docroot') 

def get_requester 

if ENV.has_key?('http_proxy') 

comps = ENV['http_proxy'] .split(' : ') 

host, port = comps[0. . -2] . join(' : ') , comps[-l] 

host.sub!(/Ahttps?:\/\//i, ") 

port = port.to_i rescue 80 

Net: :HTTP: :Proxy(host, port) 
else 

Net: :HTTP 
end 
end # get_requester 

server .mount_proc('/xmlProxy') do | request, responsel Q 

res = get_requester.get_response(URI. parse(request. query ['url '])) Q 
if res [ 'Content-Type' ] =~ /xm~\/ Q 

response [ 'Content-Type' ] = res [ 'Content-Type'] 
else 

ct = 'text/xml ' 

if res. body =~ /A<\?xml .*? encoding="(.*?)"\?>/ 

ct += ' ; charset=' + $1 
end 

response [ 'Content-Type' ] = ct 
end 

response. body = res. body 
end 

trap('INT') { server .shutdown } 

server .start 

Notez l'URL locale pour notre fonction de proxy: /xml Proxy Q, qui accepte un 
parametre url Q. Le bloc i f/el se en Q permet de forcer un contenu XML avec un 
jeu de caracteres issu du prologue XML du document, au cas ou le serveur d'origine 
ne renverrait pas le bon Content-Type. 
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Une fois ce serveur lance, vous devez pouvoir acceder a votre page de recherche sur 
http://localhost:8042. 

Intercepter le formulaire 

C'est le moment de creer notre script client, deja prevu dans notre HTML : 
client, js. Commencez par verifier que vous avez bien copie prototype, js, depuis 
l'archive des codes source ou un de vos precedents repertoires de travail, dans 
docroot. Void notre script. 

Listing 8-4 Une premiere version de notre script, client.js 

function bindFormO { 

Event .observeC'searchForm' , 'submit', hookToAJAX) ; 
} // bindForm 

function hookToAJAX(event) { 
Event . stop(event) ; 
var form = $('searchForm') ; 
$('indicator') .updateC ') ; 
$(' indicator') .show() ; 
$('resu"lts') .updateC ') ; © 
new Aj ax. Request ('/xml Proxy ' , { 
method: 'get' , 

parameters: 'url=' + encodeURIComponent (form. action) + 
'?' + encodeURIComponent(Form.serialize(form)) , 
onFailure: functionO { 

$('indicator') .hide() ; 
}, 
onSuccess: function(requester) { 

$('indicator').update('Mise en forme&#82 30; ') ; Q 
var tmr = window. setTimeout (functionO { 
window. clearTimeout(tmr) ; 
var xml = requester. responseText; 
$(' results') .update(xml .escapeHTMLO) ; 
$('indicator') .hide() ; 
}, 10); 
} 
}); 

} // hookToAJAX 

Ajax.Responders . register({ onException: function(requester , e) { 
$('indicator') .hide() ; 
alert(e) ; 

}}); 

Event. observe(window, 'load', bindForm); 
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L'indicateur a ici trois etats : cache, visible avec juste l'icone (requete puis 
reponse), et visible avec l'icone et le libelle « Mise en forme... », qui indiquera tout 
a l'heure la transformation XSLT. C'est pourquoi, avant de le rendre visible, on 
vide son contenu HTML eventuel pour redemarrer sans libelle aux recherches 
suivantes. 

Dans le meme esprit, au cas ou ce n'est pas la premiere recherche, on vide le con- 
teneur de resultats de son precedent contenu. 

© Remarquez les precautions d'encodage pour s' assurer que toute l'URL ne consti- 
tute bien qu'un seul parametre. Et c'est l'utilisation revee d'un Form. serialize 
(vous ne savez plus ce que cela fait ? courez au chapitre 4 !). 

O Notre proxy de telechargement garantissant un type MIME XML, le navigateur 
produira un DOM pour le XML renvoye, et le mettra a disposition dans la pro- 
priete responseXML du requeteur. Comme on ne le transforme pas pour l'instant, 
prenons plutot responseText pour pouvoir l'afficher. 



Figure 8-3 

Le resultat injecte dans le 
conteneur results 
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Nous ajusterons ce code a la prochaine section, en effectuant plutot une transfor- 
mation XSLT. Pour l'instant, nous visualisons directement le XML. Attention, il 
n'y a pas de retours chariot ; c'est une seule ligne, potentiellement tees longue... 

Ce setTimeout de 10 millisecondes autour du code « lourd » (requete Ajax, trai- 
tement de la reponse) est une astuce courante pour s'assurer que le navigateur va 
bien prendre le temps (puisqu'il a 10 ms devant lui) d'afficher notre libelle tout 
frais pour l'indicateur. 

C'est la premiere fois que nous utilisons Ajax.Responders, qui a ete decrit en fin 
de chapitre 6. Ainsi, nous affichons toute exception survenue lors d'un traitement 
Ajax. On ne sait jamais... 

Allez, on rafraichit la page en prenant soin d'ignorer le cache eventuel, et on retente 
une recherche. Vous devez normalement voir apparaitre le resultat (figure 8-3). 

Si vous examinez attentivement le XML retourne, vous apercevez effectivement les 
elements que nous avons deja vus : Item, ItemAttributes, Title, etc. 

De XML a XHTML : la transformation XSLT 

Utilisons maintenant une feuille de styles XSLT pour transformer, presque d'un coup 
de baguette magique, ce magma XML en un joli fragment XHTML. Pour cela, nous 
avons plusieurs etapes a suivre : 

1 Ecrire la feuille XSLT. 

2 Doter notre page de capacites XPath et XSLT. 

3 La telecharger cote client, au chargement de la page. 

4 Changer le traitement du resultat XML : au lieu d'afficher le XML, on le trans- 
forme et on affiche le resultat final. 

5 Augmenter la CSS et quelques astuces JavaScript pour embellir le XHTML 
obtenu. 

Notre feuille XSLT 

Creez un sous-repertoire xsl dans docroot, et mettez-y le fichier books . xsl suivant 
(ou reprenez-le de l'archive des codes source du livre, parce que c'est un beau pave) 

Listing 8-5 Notre feuille XSLT 

<?xml version="1.0" encoding="iso-8859-15"?> 
<xsl : stylesheet version="1.0" 

•» xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl : tempi ate match="/"> 

<xsl :apply-templates select="//Items"/> Q 
</xsl : tempi ate> 
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<xs~\ : template match="Items"> 

<xsl : van able name="viewedltems" select="count(Item)"/> 
<xsl : van' able name="total Items" select="TotalResults"/> 
<xsl :choose> 

<xsl:when test="$viewedltems > 0"> 
<p class="resultCount"> 

<xsl :value-of select="$totalItems"/> r&#2 33; sultat(s) © 
<xsl:if test="$viewedltems < $totalItems"> 
dont <xsl : value-of select="$viewedItems"/> 
list&#2 33;s ici . 
</xsl :if> 
</p> 
<dl> 

<xsl :apply-templates select="Item"/> Q 
</dl> 
</xsl :when> 
<xsl :otherwise> 

<p class="resultCount">Aucun r&#233 ;sultat  !</p> 
</xsl :otherwise> 
</xsl :choose> 
</xsl : tempi ate> 
<xsl : template match="Item"> Q 

<dt> 
<xsl : element name="a"> Q 
<xsl :attribute name="href"> 

<xsl : value-of select="DetailPageURL"/> 
</xsl :attribute> 

<xsl :value-of select="ItemAttributes/Title"/> 
</xsl :element> 
</dt> 
<dd> 

<xsl:element name="img"> 

<xsl :attribute name="class">cover</xsl :attn'bute> 
<xsl : attribute name="src"> 

<xsl :value-of select="MediumImage/URL"/> 
</xsl : attri bute> 
</xsl :element> 
<ul> 
<li> 

Auteur(s)  : 

<xsl :for-each select="ItemAttributes/Author 
■» |ItemAttributes/Creator"> 
<xsl:sort select="@Role"/> 
<xsl :element name="span"> 
<xsl : attribute name="class"> 
<xsl :choose> 

<xsl :when test="not(@Role)">author 
</xsl :when> 

<xsl :otherwise>contributor</xsl :otherwise> 
</xsl :choose> 
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</xsl :attribute> 
<xsl : value-of select="."/> 

<xsl:if test="@Role"> (<xsl :value-of select="@Role"/>) 
</xsl :if> 

<xsl:if test="position() != lastO">, </xsl:if> 
</xsl :element> 
</xsl :for-each> 
</li> 
<li> 

<xsl :value-of select="ItemAttributes/Binding"/>, 

<xsl : value-of select="ItemAttributes/NumberOfPages"/> pages, 

<xsl : value-of 

select="ItemAttributes/ItemDimensions/Height"/> &times ; 
<xsl : value-of 

*» select="ItemAttributes/ItemDimensions/Length"/> × 
<xsl : value-of 

*» select="ItemAttributes/ItemDimensions/Width"/> (cm) 
</li> 
<li> 

Publié par <xsl : value-of 

sel ect="ItemAttributes/Publ i sher"/> 1 e 
<span class="date"xxsl :value-of 

select="ItemAttributes/PublicationDate"/></span> 
</li> 

<li>ISBN  : <xsl :value-of select="ItemAttributes/ISBN"/x/li> 
<li> 

Prix éditeur  : <span class="price"xxsl : value-of 

» select="ItemAttributes/ListPrice/Amount"/></span>. 
Prix Amazon. f r  : 
<xsl : choose> 

<xsl :when test="OfferSummary/LowestNewPrice"> 
<span class="price"xxsl :value-of 

*» select="OfferSummary/LowestNewPrice/Amount"/x/span>. 
</xsl :when> 

<xsl :when test="OfferSummary/LowestUsedPrice"> 
<span class="price"xxsl :value-of 

••• select="OfferSummary/LowestUsedPrice/Amount"/x/span>. 
</xsl :when> 

<xsl :otherwise>N/D</xsl :otherwise> 
</xsl :choose> 
</li> 
<li> 
<xsl : variable name="availableCount" select="OfferSummary/TotalNew"/> 
<xsl :variable name="usedCount" select="OfferSummary/TotalUsed"/> 
<xsl :choose> 

<xsl :when test="$availableCount > 5">En stock</xsl :when> 
<xsl :when test="$availableCount > 0"> 

<xsl :value-of select="$availableCount"/> exemplai re(s) neuf(s) 
</xsl :when> 
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<xs"l:when test="$usedCount > 0"> 

<xsl :value-of select="$usedCount"/> exemplai re(s) d'occasion 
</xsl :when> 

<xsl :otherwise>Ce livre n'est pas en stock actuellement. 
</xsl :otherwise> 
</xsl :choose> 
</li> 
<li> 

Position dans les ventes  : 
<xsl :value-of select="SalesRank"/> 
</li> 
</ul> 
</dd> 
</xsl : tempi ate> 
</xsl : stylesheet> 

Eh bien, quel monstre ! Nous avons en effet souhaite faire un exemple un peu consis- 
tant... Si vous n'avez jamais fait de XSLT, vous aurez peut-etre du mal a tout suivre. 
Nous vous recommandons vivement d'aller jeter un oeil aux ressources en ligne citees 
en fin de chapitre. 

Void quelques precisions : 

Ces xsl :apply-templates appliquent des modeles {templates) a une serie de 
noeuds XML extraits a l'aide de l'attribut select. 

L'entite numerique #233 represente le « e », qu'il vaut mieux ne pas laisser litteral, 
car certains navigateurs hutilisent pas correctement la declaration de jeu de carac- 
teres dans le prologue XML de notre feuille XSLT, et croient qu'il s'agit 
d'UTF-8. L'entite numerique sera interpretee correctement. 

C'est ce tempi ate qui contient toute la description de transformation pour un ele- 
ment de resultat (pour un livre, done). 

O On utilise xsl : el ement quand on veut generer dynamiquement les valeurs de cer- 
tains attributs (par exemple href ou sre) pour 1' element. Sinon, on peut utiliser 
l'element directement, comme c'est le cas pour de nombreux p, dl, dt, dd... 

Un xsl : choose exprime une alternative, comme un switch en C/C++/Java/C# ou 
un case. ..of en Delphi. On utilise un ou plusieurs xsl :when (le premier qui cor- 
respond gagne, on ignore les suivants), et eventuellement un xsl : otherwi se pour 
les cas restants. Ici, on gere les differents cas pour les prix : prix du neuf s'il existe, 
sinon prix de l'occasion s'il existe, sinon N/D (cas tres rare). 

Meme mecanisme, cette fois-ci pour le nombre d'exemplaires. Nous avons egale- 
ment decide (arbitrairement, mais cela ressemble au comportement officiel du 
site) qua partir de 6 exemplaires neufs, on disait juste « en stock », tandis qu'en- 
dessous, on precise (cela incite a l'achat en cas d'hesitation). 
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Apprendre XSLT a notre page 

Sous le repertoire docroot, creez un repertoire ajaxslt avec les fichiers que nous 
avions utilises au chapitre 5 : misc.js, dom.js, xpath.js. Ajoutez-en un nouveau, 
que vous trouverez dans 1' archive originale : xsl t . j s. Nous vous rappellons qu'il vous 
faut au minimum Google AJAXSLT 0.5 (vous avez des versions suffisantes dans 
1' archive des codes source). 

II nous reste bien sur a charger ces scripts, en modifiant l'en-tete de notre page 
HTML comme ceci. 

Listing 8-6 Le debut modifie de notre index.html, qui charge AJAXSLT 

<script type=" text/ javascript" src=" prototype. js"x/script> 

<script type=" text/ javascript" src="ajaxslt/misc. js"x/script> 

<script type="text/ javascript" src="ajaxslt/dom. js"x/script> 

<script type=" text/ javascript" src="ajaxslt/xpath. js"x/script> 

<scri pt type="text/ javascri pt" src="aj axsl t/xsl t . j s"x/scri pt> 

<script type=" text/ javascript" src=" client. js"x/script> 

Et voila, cela suffit, notre page parle XPath et XSLT ! Si seulement cela fonctionnait 
aussi simplement pour tous les lecteurs... 

Charger la feuille XSLT au demarrage 

C'est la que nous allons commencer a faire des choses rigolotes... D'abord, il faut 
charger la feuille XSLT au demarrage, et en stocker le DOM pour utilisation ulte- 
rieure (a chaque resultat de recherche). On utilisera done... une variable globale 
(d'accord, 9a, ce n'est pas rigolo). 

En revanche, tant que ce DOM n'est pas disponible, lancer une recherche est 
perilleux : si celle-ci, par extraordinaire, aboutit avant notre chargement XSLT, la page 
sera incapable de realiser la transformation. Nous allons done desactiver initialement le 
bouton d'envoi du formulaire, et ne le reactiver qu'une fois la feuille XSLT chargee ! 

Commencons par modifier notre script. Ajoutons tout en haut notre declaration de 
variable : 



I var xsltSheet; 



La fonction bindForm est deja appelee au demarrage de la page. Meme si son nom 
n'est du coup plus tres approprie (initPage lui irait mieux, mais bindForm, c'est deja 
mieux que gloubiBoulga), nous allons lui ajouter une requete Ajax sur notre docu- 
ment XSLT. Une fois la feuille recuperee, le bouton d'envoi du formulaire est active. 
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Listing 8-7 Ajout du chargement XSLT a notre initialisation 

function bindFormO { 

new A j ax . Request ( ' xsl /books . xsl ' , { 
method: 'get' , 
onSuccess: function(requester) { 

xsltSheet = xmlParse(requester . responseText) ; 
$C'btnSearch'). disabled = false; 
} 

}); 

Event .observe('searchForm' , 'submit', hookToAJAX) ; 
} // bindForm 

Les lecteurs observateurs et futes (mais si, vous aussi !) poseront sans doute la 
question : mais pourquoi done analyser manuellement responseText avec xml Parse, 
plutot que d'utiliser directement responseXML ? Tout simplement parce que pour uti- 
liser responseXML, il faut avoir la garantie que le serveur a renvoye un type MIME 
XML pour notre fichier books. xsl. Ce n'est pas toujours le cas (cela depend de sa 
configuration), et dans notre mini-serveur WEBrick, ce n'est pas le cas. Done on se 
blinde, et on analyse la feuille manuellement. 

Derniere touche : il faut desactiver par defaut le bouton d'envoi. Modifions done sa 
definition dans index.html, comme ceci : 

<input type="submit" id="btnSearch" va"lue="Chercher !" 
•» tabindex="3" disabled="disabled" /> 

Effectuer la transformation 

Allez, on y est presque ! Maintenant que nous avons une feuille XSLT disponible, et 
la capacite a l'utiliser pour une transformation, changeons notre traitement des resul- 
tats de recherche. Modifions done la fonction onSuccess de notre requete Ajax, dans 
client . js. 

Listing 8-8 Notre traitement de resultat XML, mis a jour 

onSuccess: function(requester) { 

$('indicator').update('Mise en forme&#82 30; ') ; 
var tmr = window.setTimeout(function() { 
window. clearTimeout(tmr) ; 

var html = xsltProcess(requester .responseXML, xsltSheet); 
$(' results') .update (html) ; 
$(' indicator') .hide() ; 
}, 10); 
} 
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II nous reste un minuscule detail a regler : par defaut, Google AJAXSLT affiche un 
journal de ses principales etapes de traitement, dans un pave en haut a droite de la 
page. Pour eviter cela, ajoutons en fin de script, juste avant les inscriptions d'observa- 
teurs, la ligne suivante : 

I logging = false; 

Cette variable globale est definie par Google AJAXSLT, et vaut true par defaut. 
Passee a fal se, elle reduit les moteurs de traitement au silence. 

Vous voyez ? Ce n'etait pas si difficile (d'ailleurs, si la simplicite vous frustre, nous 
vous suggerons de recoder xsltProcess ou d'oublier ce livre). Observons le resultat, 
apres un rechargement strict de la page et une nouvelle requete (figure 8-4). 



Figure 8-4 

Nos resultats transformer ! 
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Franchement, ce n'est pas si mal ! Mais on va ameliorer tout 5a... 

Embellir le resultat 

Commencons par ajouter quelques jolies choses a notre feuille CSS. 

Listing 8-9 Ajouts CSS destines aux resultats de recherche 

/* RESULTATS DE LA RECHERCHE */ 

span .contributor { 

color: #666; 

font-size: 90%; 
} 

#results dt { 

font-weight: bold; 

font-size: 120%; 
} 

#results dd { 

margin: 0.5em 0.5em lem; 

width: 50em; 

height: 160px; 

position: relative; 

padding: 0.2 5em; 

border: lpx solid gray; 
} 

#results dd ul { 

position: absolute; 

left: 150px; 

top: 5px; 
} 

Voyons ce que cela donne (figure 8-5)... 

II faut peu de chose... Ceci dit, peut-etre avez-vous remarque deux fausses notes dans 
ce joli resultat : 

1 Les dates utilisent un format plutot technique : 2006-06-08 par exemple. Ce n'est 
pas terrible... 

2 Les prix sont prohibitifs (a moins qu'il ne s'agisse de roupies ou de livres 
turques) : 2 375 le livre RSS, on le sent passer ! En realite, Amazon.fr, comme 
tout site de commerce electronique, stocke les prix en unites basses (ici les cents, 
ou centimes d'euros) pour eviter toute erreur d'arrondi. 
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Figure 8-5 

Avec un peu de CSS, tout va 
mieux... 
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Nous ne pouvons pas kisser la page comme cela. II faut trouver une astuce. Nous 
pourrions entrer dans d'infinies « bidouilles » XSLT, qui fournit de nombreuses fonc- 
tions internes de decoupe de texte. Seulement, d'une part cela ne permettrait tout de 
meme pas de gerer la question de la date, et d' autre part, le moteur XPath de Google 
AJAXSLT ne tiendrait pas le coup : il n'implemente pas toutes ces fonctions avancees. 

Non, le plus simple reste de recourir aux bonnes vieilles expressions rationnelles sur 
le XHTML obtenu. C'est d'ailleurs aussi pour cela que notre XSLT a pris soin 
d'isoler les prix dans des <span class="price">...</span>, et la date de publication 
dans un <span class="date">...</span>. 

Creons done une fonction adjustData, qui prend le XHTML original et renvoie le 
XHTML modifie. Les dates seront affichees joliment, du style « 4 avril 2005 » ou 
« l er juin 2006 ». Les tarifs auront deux decimales et le symbole € en suffixe. Ajou- 
tons tout cela au debut de notre script client, js. Commencons par declarer les 
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noms de mois, le format des prix et les expressions rationnelles d'extraction des textes 
a modifier. 

Listing 8-10 Nos constantes de traitement des textes a localiser 

M0NTH_NAMES = [ 'Janvier', 'fevrier', 'mars', 'avril', 'mai', 
'juin', 'juillet' , 'aout', 'septembre' , 'octobre', 
'novembre', 'decembre' ]; 

PRICER = new Temp]ate('#{euros} ,#{cents}€ ') ; 

RE_DATE = ' (<span class="date">) ([0-9-]+) (</span>) ' ; 

RE_PRICE = '(<span c]ass="price">) ([0-9]+) (</span>) ' ; 

Avant de voir le code de notre fonction adjustData, il est bon de rappeler quelques 
notions. 

D'abord, nous allons utiliser la methode etendue gsub, transmise aux String par 
Prototype. Cette methode fournit une fonction pour produire le texte de remplace- 
ment a chaque correspondance de texte. Cette fonction recupere un objet represen- 
tant la correspondance, lequel objet est une sorte de tableau des groupes isoles par 
l'expression rationnelle. Par exemple, dans l'expression rationnelle suivante : 

(<span c]ass="date">) ([0-9-]+) (</span>) 

nous avons trois groupes, delimites par les parentheses : le groupe 1, qui contiendra 
fatalement <span class="date">, le groupe 2, qui contiendra le texte de notre date, 
et le groupe 3, qui contiendra necessairement </span>. Le texte que nous renvoyons 
doit preserver les groupes 1 et 3, afin de permettre, par exemple, une manipulation 
CSS ou JavaScript. On ne change que le groupe 2. 

Pour convertir un texte aaaa-mm-j j dans le format que nous souhaitons, nous allons 
commencer par le transformer en un tableau de nombres [a , m , j ] , que nous utili- 
serons pour obtenir le texte final. 

Quant aux prix, il s'agit de retenir les deux chiffres de droite comme cents, et de 
garder ceux plus a gauche comme euros. II suffit de synthetiser un objet avec deux 
proprietes euros et cents, contenant ces fragments textuels, pour pouvoir utiliser 
l'objet Prototype Template declare dans PRICER. 

Ces points etant eclaircis, voici le code de notre fonction adjustData. 
Listing 8-11 Notre fonction adjustData, qui retouche le XHTML produit 

function adjustData(text) { 

text = text. gsub (RE_DATE, function (match) { 
var comps = match [2] . split (' -') ; 
comps = comps. map(function(s) { return parselnt(s, 10); }) ; 
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if (1 == comps [2]) 

comps [2] = 'ler' ; 
var date = comps [2] + ' ' + MONTH_NAMES [comps [1] - 1] + 

*» ' ' + comps [0] ; 
return match [1] + date + match [3]; 

}); 

text = text.gsub(RE_PRICE, function (match) { 
var centsPos = match [2] .length - 2; 
var price = { 

euros: match[2] . substring(0, centsPos), 
cents : match [2] . substring (centsPos) 

}; 

return match[l] + PRICER.evaluate(price) + match[3]; 

}); 

return text; 
} // adjustData 

Declarer la fonction ne suffit pas : encore faut-il l'utiliser. Inserons done un appel 
dans notre fonction de rappel onSuccess pour la recherche. 

Listing 8-12 Notre fonction onSuccess mise a jour 

onSuccess: function(requester) { 

$('indicator').update('Mise en forme&#82 30; ') ; 
var tmr = window.setTimeout(function() { 
window. clearTimeout(tmr) ; 

var html = xsltProcess(requester. responseXML, xsltSheet); 
html = adjustData (html) ; 
$(' results') .update (html) ; 
$(' indicator'). hi de(); 
}, 10); 
} 

Un rafraichissement strict et une nouvelle recherche plus tard, nous obtenons quel- 
quechose de similaire a la figure 8-6. 

Cette fois, 9a y est ! Nous avons termine. Alors, comment trouvez-vous cela ? C'est 
sympathique, non ? Precisons au passage que, si vous souhaitez faire effectuer le trai- 
tement XSLT par Amazon directement (par exemple, si vous avez une enorme XSLT 
et d'enormes grappes de resultats, et si vos postes clients sont des charrues prehistori- 
ques), c'est possible, a l'aide du parametre Style, qui precise une URL, accessible sur 
Internet, pour votre feuille XSLT. Pour ce chapitre toutefois, l'interet est de realiser le 
traitement totalement sur le client (ce qui decharge votre couche serveur). 

Bon, nous vous laissons jouer avec une bonne heure et le montrer avec exuberance 
aux collegues. C'est votre heure de gloire, vous l'avez bien meritee (surtout si vous 
avez tape le XSLT a la main !). 
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Figure 8-6 

Tout est dans les details.. 
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Quand vous aurez fini, rejoignez-nous a la prochaine section. 



Rhumatismes 2.0 : previsions meteo 

Nous allons reprendre le meme mecanisme general, cette fois-ci sur un autre service 
tres populaire : les previsions meteo. Nous utiliserons le service de The Weather 
Channel® (« TWC »), qui est plutot fiable, detaille, et a en outre l'avantage de pro- 
poser une couverture mondiale. 

Theoriquement, l'utilisation de ce service est soumise a l'enregistrement d'une cle 
API, a fournir dans chaque requete. On s'enregistre a partir de la page suivante : 
https://registration.weather.com/ursa/xmloap/step1. Toutefois, en ajustant un tout petit 
peu FURL utilisee, notamment en evitant de dire qu'on utilise le service dans le cadre 
de sa variante « cle », on obtient les memes donnees, plus vite, et sans cle ! 

Si ce type de comportement est pratique pour les tests, et peut vous eviter un enregis- 
trement fastidieux, il n'est toutefois pas forcement licite, et nous ne garantissons 
aucunement qu'il fonctionnera indefiniment. 

Si vous devez utiliser ce service en production, prenez le temps de vous enregistrer, et 
respectez scrupuleusement les conditions d'utilisation qui, soit dit en passant, sont 
un peu contraignantes (par exemple, vous devez vous limiter a un lieu a la fois, indi- 
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quer que les donnees sont fournies par TWC, fournir un lien sur la page d'accueil de 
leur site, plus trois liens promotionnels ailleurs, etre un service gratuit...). 

Nous allons realiser une page permettant d'une part de saisir une ville (le nom une 
fois complet, nous listerons les variantes possibles, par exemple « Paris, France » et 
« Paris, Illinois »), et d'autre part d'afficher les previsions a quatre jours pour cette 
ville, une fois celle-ci validee. Par defaut, la page utilisera Paris, en France. 

La figure 8-7 montre 1' aspect que doit avoir la page. 



Figure 8-7 

Notre page une fois terminee 
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C'est tout mignon, non ? Le jeu d'icones de grande taille (160 x 160 pixels) utilise, 
qui comprend pres de 50 imagettes correspondant aux tres nombreux codes (parfois 
redondants) de situation fournis par TWC, est quant a lui libre de droits : il s'agit 
d'un jeu d'icones gratuit de Stardock. II est disponible dans l'archive des codes source 
de ce livre. Vous trouverez des alternatives sur http://www.samurize.com/modules/ 
ipboard/index.php?showtopic=3857. Elles sont toutes plus jolies que le jeu fourni par 
defaut dans le SDK de TWC... 

Notez que l'heure affichee dans la partie haute est l'heure locale au lieu indique. Afin 
d'illustrer quelques petites finesses, nous ferons en sorte quelle soit mise a jour auto- 
matiquement par la suite (toutes les secondes), comme une horloge. La page recharge 
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automatiquement les previsions toutes les 2 heures, ce qui correspond a l'intervalle de 
mise a jour des previsions a 4 jours comme indique dans le SDK de TWC. 



Preparer le projet 



Commencez par creer un repertoire de travail meteo. Recreez-y les incontournables : 
notre serveur.rb (strictement le meme que pour notre exemple Amazon.fr), le 
repertoire docroot, ses fichiers prototype, js et spinner.gif, et son sous-repertoire 
ajaxslt avec son contenu. 

Nous utiliserons bien entendu des fichiers client, js et client. ess, que nous ree- 
crirons completement en revanche. Vous pouvez partir du index.html de notre 
exemple Amazon.fr pour realiser celui de cet exemple. Dans la meme serie, on 
pourra reprendre le squelette externe de xsl /books .xsl pour nos deux feuilles XSLT 
dans cet exemple : search . xsl et forecast . xsl . 

Commencons par poser la page HTML et son style de base. Nous avons mis en 
axergue les changements par rapport a Amazon.fr. 

Listing 8-13 Une premiere version de notre page index.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

** xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

*» charset=iso-8859-15" /> 
<ti tl e>Febo&nbsp ; ? Fepabo&nbsp ; ?</ti tl e> 
<link rel="stylesheet" type="text/css" href="client .css"x/script> 



<scri 
<scri 
<scri 
<scri 
<scri 



<scnpt type 
</head> 
<body> 



pt type="text/javascript" 
pt type="text/javascript" 
pt type="text/javascript" 
pt type="text/javascript" 
pt type="text/javascript" 
text/javascri pt" 



src="prototype. js"x/script> 
src="ajaxslt/mi sc . js"x/scri pt> 
src="ajaxslt/dom. js"x/script> 
src="ajaxslt/xpath. js"x/script> 
src="ajaxslt/xslt . js"x/scri pt> 
src=" client. js"x/script> 



<hl>Febo&nbsp ; ? Fepabo&nbsp ; ?</hl> 

<div id="results"x/div> 

<div id="indicator" style="di splay: none;"x/div> 

</body> 
</html> 
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Notre CSS est pour l'instant tees basique. 
Listing 8-14 Une premiere CSS basique, client.css 

* { 

font-size: lem; 

} 

body { 

font-family: sans-serif; 
} 

hi { 

font-size: 150%; 
} 

#indicator { 

position: absolute; 

left: lem; 

bottom: lem; 

height: 16px; 

color: gray; 

font-size: 14px; 

line-height: 16px; 

background: url (spinner.gif) no-repeat; 

padding-left: 20px; 



Notez que, cette fois-ci, nous positionnons l'indicateur de progression en bas a 
gauche de la page. C'est un parti pris simple, qui nous permet de toujours avoir 
l'indicateur au meme endroit alors que le reste de la page va varier en taille, ce qui 
evitera par exemple un decalage du bloc de prevision lorsqu'on recherche des corres- 
pondances de lieu... 

Nous void avec une page qui ne fait rien et le fait bien. II est temps de lui donner un 
peu de nerf... 

Recuperer les previsions d'un lieu 

Nous allons pour l'instant definir le code du lieu « en dur » dans le script. II ne 
tiendra qua nous de le faire varier par la suite, a l'aide d'une selection de lieu aupres 
de TWC. 
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Requete et reponse REST 

L'API REST de TWC est tres simple. Nous allons utiliser une premiere ressource, 
qui correspond au lieu voulu. Ce lieu est identifie par un code specifique. Pour Paris 
en France, ce code est FRXX0076. L'URL de la ressource est done http://xoap. 
weather.com/weather/local/FRXX0076. Nous y ajoutons un parametre dayf (days of fore- 
cast) qui indique le nombre de jours de previsions, et un parametre unit, tres utile, 
pour recuperer des valeurs en systeme metrique (°C, vitesses en m/s ou km/s, etc.). 
Au final, notre URL a l'aspect suivant : 

http://xoap. weather. com/weather/"loca"l/FRXX0076?dayf=4&unit=m 

La grappe XML retournee n'utilise pas un type XML, ce qui est une faute de confi- 
guration de TWC. II nous faudra l'analyser manuellement avec responseText et 
xml Parse, comme pour nos feuilles XSLT Elle a l'aspect suivant. 

Listing 8-15 Vue partielle du resultat XML de demande de previsions 

<weather ver="2.0"> 

<1oc id="FRXX0076"> 

<dnam>Paris, France</dnam> Q 
<tm>4:57 PM</tm> © 

</1oc> 
<dayf> 

<lsup>9/5/06 3:21 PM Local Time</lsup> 
<day d="0" t="Tuesday" dt="Sep 5"> Q 
<hi>N/A</hi> 
<low>16</low> 

<part p="d"> 
<icon>44</icon> 
<t>N/A</t> 

</part> 

<part p="n"> 

<icon>33</icon> 

<t>Mostly Clear</t> 

</part> 
</day> 
<day d="l" t="Wednesday" dt="Sep 6"> 

<hi>31</hi> 

<low>18</low> 

</day> 
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<day d="2" t="Thursday" dt="Sep 7"> 

<day d="3" t="Friday" dt="Sep 8"> 

</dayf> 
</weather> 

Ce n'est pas une grappe compliquee. Void quelques precisions pour bien comprendre 

son fonctionnement : 

weather/1 oc/dnam donne le nom complet du lieu. 

weather/1 oc/tm donne l'heure locale du lieu. Afin de pouvoir manipuler cette 
heure par la suite (notre fameuse horloge), nous devrons interpreter correctement 
cette chaine de caracteres pour en faire un objet JavaScript Date. 

weather/dayf/lsup donne le moment de derniere mise a jour des donnees de 
mesure, en heure locale du lieu. Nous devrons la aussi extraire cette information 
pour en faire un objet Date, afin de pouvoir le reformater selon la langue active du 
navigateur, ce qui sera plus agreable pour l'utilisateur. 

O Chaque jour fait l'objet d'un element day dans weather/dayf. L'attribut d est un 
numero d'ordre (0 est aujourd'hui, etc.). Bien que dans la pratique, cela semble 
etre toujours dans l'ordre, rien ne le garantit dans la documentation : nous trie- 
rons done dans la XSLT, a tout hasard. Notez aussi l'attribut t, qui contient le 
nom anglais du jour de la semaine. Ce serait penible a obtenir autrement, alors on 
utilisera une astuce JavaScript pour transformer en noms francais. 

Dans un day, les elements hi et low donnent les temperatures maximale et mini- 
male. L'unite est ici le °C, puisque nous avons demande un resultat en systeme 
metrique. Notez que parfois, on n'a pas l'information complete (il arrive meme 
que les deux soient N/A). II faudra le gerer dans la XSLT. 

Chaque day a deux parties de detail, sous forme d'elements part. Leur attribut p 
indique la periode ('d' pour le jour, 'n' pour la nuit). Par souci de simplicite, 
nous hutiliserons que les parties ' d ' . II est vrai que nous pourrions utiliser un 
parametre XSLT pour indiquer si on souhaite, pour le premier jour (aujourd'hui), 
avoir l'information diurne ou nocturne, en fonction de l'heure locale du lieu... 
Nous vous laissons jouer avec cela ! 

Dans une part, l'element i con indique la representation graphique a utiliser pour 
les conditions meteo. La valeur va de a 47. Vous trouverez dans l'archive des 
codes source, dans le repertoire de cet exemple, un repertoire icons avec tous les 
fichiers PNG correspondants, que vous pouvez reprendre et placer dans votre 
doc root si vous realisez l'exemple vous-meme. 

Enfin, l'element t d'une part fournit un libelle anglais pour les conditions meteo. 
Pour le coup, nous vous epargnerons une table de traductions... Nous nous con- 
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tenterons de la V.O., que nous placerons dans les attributs alt et title de 
l'image, a condition bien sur de ne pas tomber sur N/A. 

On peut etre surpris par les noms pour le moins abscons des elements et attributs : 
dnam, tm, d, t, p... Ceci dit, outre le fait qu'ils sont a peu pres coherents (respective- 
ment data name, time, day, title, pari), ils sont necessaires pour un service utilise plu- 
sieurs centaines de milliers de fois par seconde au niveau mondial. 

XML est un format textuel verbeux, lourd en bande passante ; aussi allons-nous 
tenter de reduire la taille des donnees. Evidemment, pour reduire vraiment la taille, il 
aurait ete bien plus malin de retirer tout formatage de la grappe (retours chariot, 
indentation)... 

Initialisation de la page et obtention des previsions 

Nous allons done creer notre script de facon a ce qu'il recupere les previsions au 
demarrage. Nous stockerons la feuille XSLT dans une variable globale, bien entendu. 
Nous stockerons egalement les informations de prevision (code de lieu, nombre de 
jours) dans un objet sur lequel on evaluera un Tempi ate representant FURL a requeter. 

Void le debut de notre script client, js. 
Listing 8-16 Le debut de notre script client.js 

DEFAULT_LOCATION = 'FRXX0076'; 
FORECAST_DAYS = 4; 

FORECAST_REFRESH = 2 * 60 * 60 * 1000; 
FORECAST_TEMPLATE = new Tempi ate ( 

'http://xoap.weather.com/weather/local/#{code}?dayf=#{daysAhead}&unit=m') ; 

var gForecastParams = { 

code: DEFAULT_LOCATION, 
daysAhead : FORECAST_DAYS 

}; 

var gForecastTimer; 
var gForecastXSLT; 

La variable gForecastTimer sera utilisee pour mettre a jour periodiquement (2 heures, 
soit FORECAST_REFRESH millisecondes) les previsions. 

Nous allons egalement nous doter d'un mecanisme de gestion pour le timer neces- 
saire a cette action periodique, et de fonctions pour afficher ou masquer l'indicateur, 
tout en nettoyant son texte interne ; en effet, comme pour l'exemple Amazon.fr, 
nous serons parfois amenes a lui aj outer un libelle temporaire. 



Interagir avec le reste du monde 

Troisieme partie 

Void done quelques fonctions utilitaires supplementaires. 
Listing 8-17 Quelques fonctions utilitaires 

function cancelTimersO { 
if (gForecastTimer) 

window. clearlnterval (gForecastTimer) ; 
} // cancelTimers 

function hidelndicatorO { 
with ($(' indicator')) { 

hideO; 

updateC ') ; 

} 
} // hidelndicator 

function showIndicator() { 
with ($('indicator')) { 
updateC ') ; 
show() ; 

} 
} // showlndicator 

Ajax.Responders . register({ 

onException: function(requester, e) { 

$(' indicator') .hide() ; 

alert(e) ; 
} 

}); 

Event. observe(window, 'unload', cancelTimers); 

La fonction cancelTimers nest pas destinee a etre utilisee autrement qu'en dechar- 
gement de page (fermeture du navigateur, navigation ailleurs, etc.) : nous n'y prenons 
done pas specialement la peine de remettre la variable a ou null. Notez d'ailleurs 
son enregistrement sur cet evenement. 

Remarquez aussi le meme gestionnaire d'exception Ajax que precedemment, qui 
cachera notre indicateur et affichera 1' exception dans une boite de message. 

A present, voyons la fonction d'extraction des previsions. 
Listing 8-18 Notre fonction d'extraction des previsions 

function getForecast(e) { 
if (e) O 

Event. stop(e) ; 
var url = FORECAST_TEMPLATE.evaluate(gForecastParams) ; 
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show/Indicator O ; 
$('resu"lts') .updateC ') ; © 
new Aj ax. Request ('/xml Proxy ' , { 
method: 'get' , 

parameters: 'url=' + encodeURIComponent(url) , 
onFailure: hidelndicator, 
onSuccess: function(requester) { 

$('indicator') .update('Mise en forme… ') ; 
var tmr = window.setTimeout(function() { © 
window. clearTimeout(tmr) ; 

var data = xmlParse(requester. responseText) ; 
var html = xsltProcess(data, gForecastXSLT) ; 
$(' results') .update (html) ; 
hidelndicatorO ; 
}, 10); 
} 
}); 

} // getForecast 

L'examen initial Q de presence d'un argument e est du au fait que nous appellerons 
parfois la methode directement, alors quelle sera aussi invoquee lors de l'envoi de 
notre futur formulaire de selection de ville. Elle n'aura done pas toujours d'objet eve- 
nement associe. 

Comme dans l'exemple Amazon.fr, nous commencons par vider le conteneur de 
resultats Q, qui contient peut-etre la representation de previsions precedentes. Ainsi, 
l'utilisateur comprend immediatement qu'une mise a jour a lieu, d'autant plus qu'il a 
peut-etre remarque l'indicateur en bas a gauche de la page. 

Enfin, nous utilisons la meme astuce qu'auparavant © pour donner de meilleures 
chances a notre libelle « Mise en forme... » d'etre effectivement affiche pendant la 
transformation XSLT. 

II ne nous reste plus qua initialiser la page, ce qui se fait en deux temps : 

1 D'abord, nous recuperons la feuille XSLT capable de transformer un resultat 
XML de previsions TWC en un fragment XHTML adapte a nos besoins. 

2 Ensuite, nous lancons la demande de previsions. 
Void le code necessaire. 

Listing 8-19 Initialisation de la page 

function initPageO { 

new Ajax.Request('/xsl/forecast.xsl ' , { 
method: 'get' , 
onSuccess: function(requester) { 

gForecastXSLT = xml Parse(requester. responseText) ; 
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function initPageO { 

new A j ax. Request ('/xsl /forecast .xsl ' , { 
method: 'get' , 
onSuccess: function(requester) { 

gForecastXSLT = xml Parse(requester. responseText) ; 
getForecast() ; Q 

gForecastTimer = window. setlnterval (getForecast, 
*• FORECAST_REFRESH) ; © 
} 

}); 

} // initPage 

logging = false; 

Event. observe(window, 'load', initPage); 

Tout ceci doit commencer a sembler familier... On recupere la feuille XSLT, et une 
fois celle-ci obtenue, on la stocke dans gForecastXSLT, on demande Q les previsions 
(vous voyez qu'ici, aucun objet evenement n'est transmis en argument), et on 
declenche le timer d'actualisation, toutes les 2 heures ©. 

Remarquez la fameuse variable globale logging de Google AJAXSLT, que nous 

mettons a f al se pour eviter d'avoir un pave de suivi des operations XPath/XSLT en 
haut a droite de la page, comme dans l'exemple precedent. 

Pour chipoter, on peut argumenter que puisque la requete REST est asynchrone, 
i nitPage recuperera la main sans doute avant qu'on ait recu et traite les previsions, ce 
qui veut dire qu'on declenchera le timer une ou deux seconde(s) trop tot. C'est exact. 
Cependant sur 2 heures, dans un contexte sans contraintes precises de temps, ce n'est 
pas vital. 



Et la feuille XSLT ? 

Peut-etre vous etes-vous jete(e) sur votre page pour tester le resultat, mais n'avez 
abouti qua du vide, voire une erreur. Eh oui ! Vous avez neglige un composant cri- 
tique, que nous n'avons pas encore realise : la feuille XSLT. La voici. 

Listing 8-20 Notre feuille XSLT pour les previsions 

<?xml version="1.0" encoding="iso-8859-15"?> 
<xsl : stylesheet version="1.0" 

*» xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl : tempi ate match="/"> 

<xsl :apply-templates select="/weather"/> 
<xsl : appl y-templ ates select="/error"/> O 
</xsl : tempi ate> 
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<xsl : tempi ate match="weather"> 
<div id="weatherData"> Q 

<xs~\ :apply-templates select="loc"/> 
<xsl :apply-templates select="dayf "/> 
</div> 
</xsl : tempi ate> 
<xsl :template match="loc"> 
<p class="cityInfo"> 

<xsl :value-of select="dnam"/> 

<xsl:text> @ </xsl:text> 

<span id="cityTime"><xsl :value-of select="tm"/x/span> Q 

</p> 
</xsl : tempi ate> 
<xsl : tempi ate match="dayf"> 
<div class="forecast"> 

<xsl :for-each select="day"> 
<xsl:sort select="@d"/> Q 
<div class="dayForecast"> 

<span class="dayName"xxsl :value-of select="@t"/x/span> Q 
<xsl:element name="img"> 

<xsl :attribute name="class">picto</xsl :attribute> 
<xsl :attribute name="src">icons/<xsl :value-of 

sel ect="part [@p= ' d ' ] /i con"/> . png</xsl : att ri bute> 
<xsl:if test="part[@p='d']/t != "N/A"^ 
<xsl :attribute name="alt"xxsl :value-of 

sel ect=" part [@p= ' d ' ]/t"/x/xsl : att ri bute> 
<xsl :attribute name="title"xxsl :value-of 

*• select="part[@p='d']/t"/x/xsl :attribute> 
</xsl : if> 
</xsl :element> 
<span class="temps"> 

<xsl:if test="low != 'N/A'"> © 

<xsl :value-of select="low"/> 
</xsl :if> 
<xsl:if test="hi != 'N/A'"> 

<xsl:if test="low != 'N/A'">/</xsl :if> 
<xsl :value-of select="hi"/> 
</xsl :if> 

<xsl:if test="hi != 'N/A' or low != 'N/A'">°C</xsl :if> 
</span> 
</div> 
</xsl :for-each> 
</div> 
<p class="forecastUpdateTime"> 

Derniè re mise à jour des mesures  : 
<span id="latestllpdate"xxsl :value-of select="lsup"/x/span> Q 
</p> 
</xsl : tempi ate> 

<xsl :template match="error"> O 
<p class="error"> 
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Erreur #<xsl :value-of select="err/@type"/>  : 
<xsl :value-of select="err"/> 
</p> 

</xsl : tempi ate> 
</xsl : stylesheet> 

Finalement, elle est plus legere que celle de notre exemple Amazon.fr. Nous vous 

recommandons tout de meme de la recuperer dans 1' archive des codes source du 

livre... Void quelques remarques importantes : 

O Lorsqu'on a commis une erreur dans la requete, ou qu'un probleme reseau ou ser- 
veur a ete rencontre, on recoit parfois une reponse contenant plutot un element 
racine error, dont 1' element fils err detaille un minimum le souci. Autant utiliser 
la feuille XSLT pour l'afficher en cas de pepin ! Nous n'aurons de toutes facons 
jamais un element racine weather<?/une autre racine error, par definition. 

Q En encadrant notre sortie dans un ch'v dedie, nous isolons la portion a styler du 
contenant existant. Nous pouvons fournir a cote un fragment CSS dont toutes les 
regies sont prefixees par #weatherData, et etre tranquilles. Ceux souhaitant plu- 
sieurs affichages utiliseraient une classe, mais nous rappellons que c'est contraire 
aux regies d'utilisation du service de TWC... 

Notez les span avec un ID ou une classe... Outre la possibilite de styler indivi- 
duellement les donnees au sein d'un texte environnant, ils nous seront surtout uti- 
les pour le reformatage partiel des informations, a l'aide d'expressions rationnel- 
les, de gsub et d'objets JavaScript Date, comme nous allons le voir plus tard. 

O Void le fameux tri explicite des journees de prevision, que nous mentionnions 
plus haut. 

Comme indique plus tot, on ne definit les attributs alt et title de l'image que si 
le libelle n'est pas N/A. 

Le traitement des N/A est ici un peu plus complexe, puisque nous avons deux don- 
nees a gerer. Ce fragment n'affiche rien si nous avons deux N/A, affiche une seule 
temperature si besoin, ou les deux separees par une barre oblique {slash /). Des 
que nous avons une temperature, nous suffixons par °C. 

Evidemment, il faut completer la CSS. 
Listing 8-21 Complements de client.css 

/* Affichage des previsions */ 

#weatherData { 

margin: lem auto; 

border: lpx solid #666; 

width: 570px; 
} 



Services web et REST : nous ne sommes plus seuls 

Chapitre 8 



p.citylnfo { 

text-align: center; 

font-weight: bold; 

font-size: smaller; 

color: navy; 

border-bottom: lpx solid silver; 

margin: 0.3em 0; 

padding: O.lem 0; 
} 

#cityTime { 

color: #44f; 
} 

div. forecast { 

width: 552px; 

height: 180px; 

margin: auto; 
} 

div.dayForecast { 

float: left; 

position: relative; 

width: 138px; 

height: 100%; 
} 

span.dayName { 

position: absolute; 

left: 0; top: 0; width: 128px; 

text-align: center; 

color: gray; 
} 

i mg . pi cto { 

position: absolute; 

left: 0; top: 32px; 
} 

span. temps { 

position: absolute; 

left: 0; bottom: 0; width: 128px; 

text-align: center; 

color: #444; 
} 

p.forecastUpdateTime { 
text-align: center; 
font-size: smaller; 
color: gray; 
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} 



border-top: lpx solid silver; 
margin: 0.3em 0; 
padding: O.lem 0; 



p. error { 

width: 60ex; 

margin: lem auto; 

padding: lem; 

border: lpx solid maroon; 

background: #fdd ; 

color: red; 

text-align: center; 
} 



Cette fois ca y est ! Vous pouvez rafraichir (pensez a contourner le cache), cela 
devrait marcher (figure 8-8). 



Figure 8-8 

Nos previsions a 4 jours 
pour Paris 
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Les petites touches finales 

II nous reste a apporter quelques petits ajustements qui font, pourtant, toute la diffe- 
rence... Si vous observez bien la figure 8-8 (ou votre ecran), vous remarquerez que : 

• L'heure locale est en anglais, {damned!) 

• Les noms des jours aussi. 
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• Et l'heure de derniere mise a jour des mesures, n'en parlons pas ! 

• Qui plus est, l'heure locale « n avarice » pas comme une horloge, alors que nous 
souhaitions en realiser une. 

II est temps de nous attaquer a tout cela. Commencons par modifier les textes vers 
des valeurs francaises (ou, dans le cas des dernieres mesures, et par paresse, des 
valeurs dans la langue active du navigateur). 

Pour ce faire, nous allons utiliser le meme genre d'algorithme que pour notre 
exemple Amazon.fr, avec une fonction adjustData, des expressions rationnelles, des 
appels a la methode gsub ajoutee aux Strings par Prototype... mais aussi quelques 
astuces specifiques a cet exemple. 

Void deja quelques « constantes » supplementaires a ajouter en debut de script. 
Listing 8-22 Nouvelles « constantes » en debut de script 

DAY_NAMES = { 

'Monday': 'lundi', 'Tuesday': 'mardi', 
'Wednesday': 'mercredi', 'Thursday': 'jeudi', 
'Friday': 'vendredi', 'Saturday': 'samedi', 
'Sunday': 'dimanche' 

}; 

RE_LOCALTIME = ' (<span id="cityTime">) (. *?) (</span>) ' ; 

RE_LATESTUPDATE = ' (<span id="latestUpdate">) (. *?) Local Time(</span>) ' ; 

RE_DAYNAME = ' (<span class="dayName">) (.*?) (</span>) ' ; 

L'objet DAY_NAMES est une premiere astuce : en nommant ses proprietes d'apres les 
noms anglais des jours, nous pourrons faire correspondre un nom francais a chaque 
nom anglais, rien qu'en faisant DAY_NAMES[variableDeNomAnglais] (souvenez-vous 
que l'operateur [] permet d'acceder aux proprietes). 

Ici, nous aurions pu nous passer des apostrophes autour des noms des proprietes, mais 
cela n'est pas toujours vrai (certaines langues utilisent dans leurs noms de jours des 
caracteres invalides dans un identifiant JavaScript) : autant prendre ses precautions. 

Cote expressions rationnelles, le quantificateur *? est la version reticente de * : il 
signifie « prend la plus petite quantite permettant toujours de satisfaire l'ensemble de 
l'expression ». Dans le cas qui nous occupe, on est ainsi sur de s'arreter au premier 
</span> rencontre, plutot qu'au dernier (ce qui poserait de gros problemes). Par con- 
sequent, nos groupes .*? contiennent tout ce qui se trouve entre le > fermant et le 
premier </span> rencontre : en somme, le contenu du span. 
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Nous aurons aussi besoin d'un nouveau timer pour gerer l'horloge, et d'une autre 
variable, un objet Date, pour l'heure de cette horloge. Au passage, nous ajusterons 
done cancelTimers pour prendre en compte ce second timer. 

var gLocalTime; 

var gLocalTimeTimer; 

function cancelTimers() { 
if (gForecastTimer) 

window. clearlnterval (gForecastTimer) ; 
if (gLocalTimeTimer) 

window. clear Interval (gLocalTimeTimer) ; 
} // cancelTimers 

II est temps d'ecrire notre fameuse fonction adjustData. Son code est interessant a 
comprendre. 

Listing 8-23 Notre fonction d'ajustement de XHTML, adjustData 

function adjustData(html) { 

// L'heure locale courante du lieu affiche 

html = html .gsub(RE_LOCALTIME, function (match) { 

gLocalTime = new Date(' 1/1/1970 ' + match[2]); Q 

gLocalTime. setSeconds(new Date() . getSecondsO) ; 

return match[l] + gLocalTime. toLocaleTimeStringO + match[3]; Q 

}); 

// L'heure de derniere mise a jour 

html = html .gsub(RE_LATESTUPDATE, function(match) { 

var lsup = new Date(match[2]) ; 

if (1 sup. getFull Year () < 1980) Q 

lsup.setFullYear(lsup.getFullYear() + 100); 

return match[l] + lsup.toLocaleStringO + match[3]; 

}); © 

// Jours de la semaine 

html = html .gsub(RE_DAYNAME, function(match) { 

return match [1] + DAY_NAMES[match[2]] + match [3]; 

}); 

return html ; 
} // adjustData 

Voyons ensemble les quelques points saillants : 

O II n'est pas possible de construire un objet Date juste sur la base d'un texte 
horaire : il faut une partie date. Dans la mesure ou nous ne nous interessons 
cependant pas a la date (nous ne l'afficherons pas), nous en prenons une quelcon- 
que. Ici, nous avons opte pour le celebre l er Janvier 1970 : dans la plupart des sys- 
temes, la representation zero pour une date correspond au l er Janvier 1970 a 
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00:00:00 GMT. Remarquez l'espace en fin de texte, sans quoi la chaine obtenue 

n'est plus valide (01/01/19704:18 PM...). 

Autre point important : comme nous allons afficher les secondes (apres tout, c'est 

une horloge detaillee...), il nous faut autre chose que les zero secondes que va pro- 

duire Date. parse. Quel que soit le fuseau horaire, les secondes sont les memes 

(d'accord, il existe un cas de figure ou cela ne sera pas vrai) : nous utilisons done 

les secondes locales. 

Enfin, remarquez qu'on stocke l'heure de l'horloge dans la variable globale 

gLocalTime, que nous pourrons utiliser ensuite pour mettre a jour l'horloge. 

Q Les appels a toLocaleTimeStringO et toLocaleStringO demandent au naviga- 
teur de fournir une representation textuelle complete adaptee aux conventions de 
la langue active. La premiere haffiche que l'heure, 1' autre affiche aussi la date. 

Q Les implementations de JavaScript n'ont pour la plupart pas de « pivot » sur 
Interpretation des dates. Du coup, une date a partir de 2000 exprimee sur deux 
chiffres va utiliser l'ancienne interpretation, et regresser de cent ans ! Nous corri- 
geons manuellement ce cas de figure, qui nous concerne d'ailleurs, en supposant 
un pivot a 1980. 

Que nous reste-t-il a faire ? Tout d'abord, il va nous falloir ecrire une fonction de 
mise a jour de l'horloge, qui sera appelee toutes les secondes. 

Listing 8-24 Gestion de l'horloge 

function updateLocalTimeO { 

gLocalTime. setTime(gLoca"ITi me. getTimeO + 1000); 

$('cityTime') . update (gLocaITi me. toLocaleTimeSt ring ()) ; 
} // updateLocalTime 

Ensuite, il nous faut appeler adjustData : pour l'instant, le code ne s'en sert pas. Et 
en prevision des rafraichissements de previsions (automatiques ou explicites, avec le 
formulaire que nous allons realiser dans un instant), nous devons desactiver le timer 
d'horloge avant rafraichissement, et le reactiver une fois le nouveau fragment 
XHTML affiche (et encore, a condition qu'il ne s'agisse pas d'une erreur, et qu'on 
dispose done d'un element d'lD cityTime). 

Tout ceci a lieu dans la nouvelle version de getFo recast. 
Listing 8-25 Notre nouvelle fonction getForecast 

function getForecast(e) { 
if (e) 

Event .stop(e) ; 
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if (g Local TimeTi me r) 

window. clearlnterval (gLocalTimeTimer) ; 

var url = FORECAST_TEMPLATE.evaluate(gForecastParams) ; 
showIndicatorO ; 
$(' results') . update (' ') ; 
new Ajax.RequestC/xmlProxy' , { 
method: 'get' , 

parameters: 'url=' + encodellRIComponent(url) , 
onFailure: hi del indicator , 
onSuccess: function(requester) { 

$(' indicator ') . update ( 'Mi se en forme… ') ; 
var tmr = window. setTimeout(function() { 
window. clearTimeout(tmr) ; 

var data = xmlParse(requester. responseText) ; 
var html = xsltProcess(data, gForecastXSLT) ; 
$(' results') .update(adjustData(html)) ; 
if CSC'cityTime')) 

gLocalTimeTimer = window. setlnterval (updateLocalTime, 1000); 
hidelndicatorO ; 
}, 10); 
} 



}) 
} // getForecast 

Un petit rafraichissement strict, et voici l'ecran de la figure 8-9. 



Figure 8-9 

Un affichage localise, et une 
horloge qui fonctionne 
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C'est deja beau, je vous sens emu(e), mais ce petit code n'est rien a cote de ce qui 
nous attend a la prochaine section. 
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Rechercher un lieu 

Nous allons ajouter une derniere fonctionnalite a cette page si sympathique : la pos- 
sibilite de changer de lieu. Et pour cela, nous allons devoir requeter une autre res- 
source de l'API REST de TWC. 

Cependant, cette requete exige que le nom soit assez completement tape pour avoir 
des correspondances exactes (par exemple, « Pa » ne renverra rien : pour avoir des 
suggestions de « Paris », il faut taper « Paris »... on a alors quatorze resultats !). On 
utilisera une completion automatique de texte Ajax, pour que ce soit plus joli et plus 
intuitif Cependant cette optique va nous amener a realiser un code qui, s'il n'est pas 
tres complique, va neanmoins vous remplir de fierte. 

Preparons le terrain 

Commencons par definir le formulaire, en debut de corps de page dans index, html, 
et ajouter les styles correspondants dans cl i ent . ess. 

Listing 8-26 Le formulaire insere dans index.html 

<hl>Febo&nbsp ; ? Fepabo&nbsp ; ?</hl> 

<form id="cityForm"> 

<P> 

<label for="edtCity" accesskey="V">Ville (nom anglais)</label> 
<input type="text" id="edtCity" name="city" value="Paris, France" /> 
<input type=" submit" id="btnDi splay" value="Afficher" 

*• disabled="disabled" /> 
<div id="city_suggestions" class="autocomplete"x/div> 

</p> 
</form> 

<div id="results"x/div> 

Remarquez que nous avons desactive le bouton d'envoi, comme pour Amazon.fr : 
nous ne le reactiverons qu'une fois chargee la feuille XSLT (necessaire a la transfor- 
mation des resultats de recherche). 

Listing 8-27 Les styles pour le formulaire, dans client.css 

#cityForm { 

width: 34em; 

border: lpx solid gray; 

margin: lem auto; 

padding: 0.5em; 
} 
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#cityForm p { 

position: relative; 
} 

#edtCity { 

position: absolute; 

left: lOem; 

width: 17em; 
} 

#btnDi splay { 

position: absolute; 

left: 28em; 

width: 6em; 
} 

div.autocomplete { 

position: absolute; /* 

width: 2 50px; /* 

background-color: white; 

border: lpx solid #888; 

margin: Opx; 

padding: Opx; 

z-index: 42; 
} 

div.autocomplete ul { 

list-style-type: none; 
margin: Opx; 
padding: Opx; 

} 



div.autocomplete ul li { 

list-style-type: none; 

display: block; 

margin: 0; 

cursor: default; 

/* Et quelques fi nasseries . . . */ 

padding: O.lem 0.5ex; 

font-family: sans-serif; 

font-size: 90%; 

color: #444; 

height: 1.5em; 

line-height: 1.5em; 

overflow: hidden; 
} 

div.autocomplete ul li span. informal { Q 

display: none; 
} 



Histoire d'etre explicite... */ 
Sera ajuste par script. aculo. us 



V 
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/* Rappel : script. aculo. us active une classe 'selected' 

"lorsqu'un element est selectionne */ 
div.autocomplete ul li. selected { 

background-color: #ffb; 
} 

Remarquez que nous utilisons exactement le meme bloc de styles basiques que dans 
notre exemple de completion simple au chapitre 7. Ces styles viennent d'ailleurs 
directement des suggestions du wild documentaire de script.aculo.us. 

Nous attirons toutefois votre attention sur la declaration Q. Nous avons vu que 
script.aculo.us ignorera tout texte contenu dans un element de classe informal 
lorsqu'il extraira de 1' element 1 i le texte a placer dans le champ de saisie. En general, 
nous affichons neanmoins de tels textes dans la liste des suggestions. Ici non, nous 
verrons pourquoi tout a l'heure. 

Nous allons aussi ajouter a notre script client, js une « constante » pour composer 
FURL de requete, ainsi qu'une variable pour recevoir la feuille XSLT dont nous 
aurons besoin. 

Listing 8-28 Ajouts a notre script client.js 

LOCATION_TEMPLATE = new Tempi ate ( 

'http://xoap. weather. com/search/sea rch?where=#{name} ') ; 

var gSearchXSLT; 

Regardons a present a quoi ressemblent notre requete et le XML de reponse. La 
requete est simple : FURL http://xoap.weather.com/search/search accepte un parametre 
where avec le texte saisi. Par exemple : 

I http : //xoap . weather . com/sear ch/search?where=pari s 

Le XML resultat est egalement trivial. Void le resultat pour « Moscow ». 
Listing 8-29 Resultat XML d'une recherche de lieu sur « Moscow » 

<search ver="2.0"> 

<locid="RSXX0063" type="l">Moscow, Russia</loc> 

<loc id="USAR0390" type="l">Moscow, AR</loc> 

<loc id="USID0170" type="l">Moscow, ID</loc> 

<loc id="USIA0594" type="l">Moscow, IA</loc> 

<loc id="USKS0396" type="l">Moscow, KS</loc> 

<loc id="USMI0572" type="l">Moscow, MI</loc> 

<loc id="USOH0629" type="l">Moscow, OH</loc> 

<loc id="USPA1102" type="l">Moscow, PA</loc> 
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<1oc id="USTN0346" type="l">Moscow, TN</"loc> 
<1oc id="USTX0919" type="l">Moscow, TX</1oc> 
<1oc id="USVT0151" type="l">Moscow, VT</1oc> 
</search> 

Comme vous pouvez le constater, les americains ont decidement eu a coeur de semer 
des noms de villes europeennes dans un etat sur quatre... II en est de meme pour Flo- 
rence, London... Et Paris, evidemment. 

En tout cas, le XML est trivial. Le seul souci, c'est qu'il est inutilisable avec notre 
completion automatique Ajax : celui-ci exige une structure ulAli, alors que nous 
avons ici du search/1 oc. Et Ajax.Autocompleter exploite directement le contenu 
recupere. Comment faire ? 

Eblouissez vos amis avec Ajax.XSLTCompleter 

Nous commencerons par utiliser certaines options avancees de Ajax.Autocompleter, 
que nous n avons guere eu l'occasion d'employer jusque-la : 

• cal 1 back, qui permet de fournir une methode chargee de transformer les parame- 
tres de requete calcules par defaut ; nous l'utiliserons pour remplacer le simple 
nom de lieu par notre fameux parametre url avec FURL complete de requete au 
service REST, dont a besoin /xml Proxy. 

• afterUpdateElement, qui nous donne la main une fois une selection etablie par 
l'utilisateur. Ici, avoir le nom de la ville interesse l'utilisateur, mais nous, nous 
avons besoin du code interne (par exemple, FRXX0076). II faudra le stocker dans le 
champ code de notre variable gForecastParams, pour que getForecast l'utilise 
dans sa requete. 

Ces deux options ne resolvent toutefois pas le probleme de transformation a la volee 
d'un format de document (le XML resultat de TWC) en un fragment XHTML ul Al i . 

Pour cela, nous allons devoir veritablement mettre les mains dans le cambouis, en 
creant une sous-classe de Aj ax . Autocompl eter ! Oui, vous avez bien lu : nous allons 
etendre une classe Prototype, et d'une maniere non triviale. 

Lidee est simple : nous allons creer un objet « heritant » de Ajax. Autocompleter, qui 
definira sa propre fonction de rappel onComplete, a la place de l'existante (qui existe 
en interne dans le prototype parent). Appelee en fin de recuperation de reponse, 
cette methode pourra analyser le texte de celle-ci pour produire une grappe XML, et 
appliquer une transformation. II ne lui reste alors plus qua appeler la methode-cle 
chez les objets de completion automatique : updateChoices, en lui passant le frag- 
ment XHTML. Et le tour est joue ! Dans Ajax.Autocompleter, on appelle 
updateChoices en lui passant directement le responseText. Ici, nous interceptons le 
resultat pour le transformer. 
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Nous allons evidemment rendre cet objet reutilisable, en ajoutant une option xslt a 
la liste des options existantes. Cerise sur le gateau, cette option pourra etre soit du 
texte, soit un DOM. Dans le premier cas, on l'analysera a l'instanciation pour pro- 
duire un DOM. 

Le code resultat fait appel a quelques morceaux ardus de JavaScript, en particulier si 
vous n'avez pas bien suivi l'heritage par prototypes au chapitre 2. Toutefois, lorsque 
vous aurez compris ce code, vous serez bien avance(e) sur le chemin qui mene au 
statut de gourou JavaScript ! 

Void notre nouvel objet, a aj outer dans client.js. 
Listing 8-30 Notre objet Ajax.Autocompleter 

Ajax.XSLTCompleter = Class. createO ; 
Object .extend (A j ax. XSLTCompleter. prototype, 
Ajax.Autocompleter. prototype) ; 
Object .extend (A j ax. XSLTCompleter. prototype, { 
initialize: functionO { Q 

Ajax.Autocompleter. prototype. initialize. apply (this, arguments) ; @ 

this. options. onComplete = this.onComplete.bind(this) ; 

var options = arguments[3] || {} 

if ("string" == typeof this .options .xslt) 

this. options. xslt = xml Parse(this. options. xslt) ; 
}, 

onComplete: function(request) { 

var data = xmlParse(request . responseText) ; 

var html = xsltProcess(data, this. options. xslt) ; 

this. updateChoices (html) ; Q 
} 

}); 

Et voila le travail ! Quelques precisions tout de meme : 

Dans les objets Prototype (les objets obtenus en appelant Class. createO), le 

« constructeur » s'appelle i ni ti al i ze. 
Cette ligne revient a appeler la version heritee du constructeur, mais bien sur 

l'objet courant. C'est un peu l'equivalent d'un super(...) en Java (auquel on repas- 

serait explicitement tous les arguments), ou d'un inherited; en Delphi. 
© C'est cet appel qui va mettre a jour la liste des suggestions et l'afficher automati- 

quement. 

Cet objet etant pret, il nous reste a disposer d'une feuille de styles, et a utiliser tant 
l'objet que la feuille. Void deja le document, search . xsl , a mettre dans docroot/xsl . 
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Listing 8-31 Notre feuille xsl/search.xsl 

<?xml version="1.0" encoding="iso-8859-15"?> 
<xsl : stylesheet version="1.0" 

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl : tempi ate match="/"> 

<xsl :apply-templates select="/search"/> 
</xsl : tempi ate> 
<xsl :template match="search"> 
<ul> 

<xsl :apply-templates select="loc"/> 
</ul> 
</xsl : tempi ate> 
<xsl :template match="loc"> 
<li> 

<span class="informal"xxsl :value-of select="@id"/x/span> Q 
<xsl :value-of select="."/> 
</li> 
</xsl : tempi ate> 
</xsl : stylesheet> 

Vous vous demandez peut-etre pourquoi nous avons utilise un span de classe 
informal (que la CSS cache, qui plus est !), plutot que l'attribut value du li, qui 
semble remplacement naturel pour le code. 

Nous aussi. 

Nous avons decouvert que Firefox (et peut-etre d'autres navigateurs) avait un defaut 
dans sa propriete innerHTML, qui retirait le debut de certains codes lorsque ceux-ci 
etaient stockes dans l'attribut value des li ! En revanche, places dans le span, aucun 
probleme... Voila pourquoi nous utilisons ce moyen quelque peu detourne. 



Brancher les composants ensemble 

C'est maintenant la derniere ligne droite de notre exemple : nous allons inserer du 
code supplemental au debut de notre fonction i nitPage. Ce code a trois fonctions : 

1 Associer getFo recast a l'envoi du formulaire, comme cela a ete prevu des le depart. 

2 Requeter la feuille XSLT 

3 Une fois celle-ci obtenue, initialiser la completion automatique sur le champ du 
formulaire, avec quelques parametres speciaux... 

Void done le nouveau code, figurant au tout debut de i nitPage (nous avons laisse les 
lignes alentour pour vous aider a vous reperer). 
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Listing 8-32 Notre initialisation finalisee 

function initPageO { 

Event. observeC cityForm' , 'submit', getForecast) ; 
new Ajax.Request('/xs"l/search .xsl ' , { 
method: 'get' , 
onSuccess: function(requester) { 

gSearchXSLT = xml Parse(requester. responseText) ; 
new Ajax.XSLTCompleter('edtCity' , 'city_suggestions' , 
*» '/xml Proxy' , { © 
method: 'get' , 
paramName: 'foo', 
indicator: 'indicator', 
minChars: 2, 
xslt: gSearchXSLT, 
callback: function(e, entry) { 

var url = LOCATION_TEMPLATE.evaluate( 

{ name: entry. substring(4) }) ; 
return 'url=' + encodeURIComponent(url) ; 

}, 

afterUpdateElement: function(e, elt) { 

gForecastParams .code = elt .fi rstChild.fi rstChi Id. nodeValue; 
} 

}); 

$('btnDi splay') .disabled = false; © 
} 

}); 

new Ajax.Request('/xsl/forecast .xsl ' , { 

Vu la richesse de ce code, nous vous gratifions d'un bon nombre de remarques : 

O Nous associons, evidemment, getForecast a l'envoi du formulaire. Souvenez- 
vous du Event . stop au debut de getForecast : cela empechera l'envoi normal, au 
profit d'une recherche Ajax. Celle-ci utilisera gForecastParams. code, qui aura 
ete mis a jour par la fonction de rappel afterUpdateElement de la completion 
automatique. 

Voila notre chargement de feuille XSLT pour transformer les resultats de recher- 
che en fragment compatible (ul/li) avec Autocompleter.Base, le mecanisme 
generique de completion automatique. 

Evidemment, nous utilisons a nouveau notre /xml Proxy a tout faire... 

Nous pourrions nous en passer, mais comme le seul parametre que nous souhai- 
tions est en fait le parametre url que va synthetiser notre fonction de rappel 
cal 1 back, autant bien indiquer que le parametre d'origine ne sert a rien cote ser- 
veur (il ne sera meme pas envoye, car cal 1 back ne le preserve pas). 



Interagir avec le reste du monde 

Troisieme partie 



Facilite toujours : vous souveniez-vous que l'option indicator affiche et masque 

toute seule notre indicateur ? Puisqu'ici nous ne nous soucions pas de jouer sur 

son libelle, nous pouvons utiliser cette option. 
TWC envoie une erreur si nous effectuons une recherche avec un nom d'un seul 

caractere pour le parametre where. II est vrai que ce n'est pas tees utile. Disons 2 

au minimum. 

Hourra ! Void notre option personnalisee ! Nous lui transmettons directement 
notre variable globale qui contient la feuille XSLT a utiliser. Comme le code cou- 
rant s'execute depuis le onSuccess du chargement de cette XSLT, on sait que la 
variable est prete. 

La fonction de rappel callback recoit le champ de saisie et le parametre corres- 
pondant a la saisie en cours, prevu pour envoi cote serveur. Ici, c'est done par 
exemple 'foo=blah' (pour une saisie de blah, et parce que nous avons dit 
paramName: 'foo'). 

Nous eliminons les 4 premiers caracteres pour recuperer le texte encode, que nous 
injectons dans notre modele d'URL. Nous encodons le tout et nous prefixons par 
' url = ' , le parametre attendu par /xml Proxy. 
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Relisez la feuille XSLT : chaque 1 i contient d'abord un premier element fils span, 
qui contient un seul element fils de type texte. Pour acceder a la valeur de ce texte, 
on a done elt (F element 1i), un premier firstChild (le span), un second (le 
noeud texte dans le span), et un nodeVal ue (le texte lui-meme). 

© N'oublions pas, apres tout 9a, de finir de reagir au chargement de la feuille XSLT 
en activant le bouton du formulaire ! 

Cette fois vous y etes : vous pouvez faire un rafraichissement strict, et taper autre 
chose dans la zone, par exemple « Paris ». Vous devriez voir rapidement apparaitre 
une liste de possibilites (figure 8-10). 

Remarquez « Paris/Charles de Gaulle, France » : les services meteo traitent generale- 
ment a part les aeroports. Choisissons par exemple « Paris, IL » (Illinois, USA), et 
validons le formulaire (sous Opera 9 et Safari 2, il est valide directement), ce qui 
donne l'ecran de la figure 8-11. 
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Gerer des images chez Flickr 

Flickr, recemment acquis par Yahoo!, est le site de reference pour publier, partager, 
cataloguer et diffuser des photos en ligne. Fort d'une direction technique de haut vol, 
le site propose une API tres complete, accessible en REST, en XML-RPC ou en 
SOAP (rien que dans l'ordre de ces formats, qui est celui figurant partout sur le site, 
on sent que la couche technique va dans le bon sens...). 

Cette API est merveilleusement documented, de facon tres claire et detaillee. Le 
point d'entree de la documentation est http://www.flickr.com/services/api/ (tout simple- 
ment). Chaque methode est decrite avec son synopsis, le detail de ses arguments, ses 
contraintes en authentification, un exemple du contenu de reponse, et la liste 
detaillee des codes d'erreur avec leurs causes ! 

C'est deja fabuleux, mais on trouve en plus a chaque fois un lien sur l'explorateur 
API, qui permet de tester immediatement, interactivement, un appel a la methode 
(pour peu qu'on soit connecte et qu'on dispose d'une cle API). Un vrai bonheur... 

Par ailleurs, de nombreuses bibliotheques pour cette API sont disponibles, pour la 
plupart des langages et plates-formes (citons notamment, par ordre alphabetique : 
ActionScript, Delphi, Java, .NET, PHP, Python et Ruby). 

Dans ce dernier exemple, nous allons afficher un jeu de photos publie par un utilisa- 
teur de Flickr (et pas des moindres : Tristan Nitot, le president de Mozilla Europe en 
personne), afficher les vignettes, et en cliquant dessus, afficher la photo plus grande, 
en tant que lien vers la taille originale, ainsi que les commentaires de la photo. 

Nous n'utiliserons en revanche pas de methodes modifiantes (ajout de commentaire, 
etc.) car elles necessitent un mecanisme d'authentification mal adapte a nos condi- 
tions de test. Ce n'est pas tant qu'il faille calculer des hashes MD5 (des bibliotheques 
JavaScript font cela tres vite), mais qu'il faille fournir a Flickr une URL accessible sur 
le Web, connectee a notre application... Cela ferait plusieurs allers-retours consecu- 
tifs, et deviendrait vite trop epais pour ce chapitre. 

Obtenir une cle API chez Flickr 

II faut d'abord avoir un compte chez Flickr, ce qui signifie aujourd'hui un compte 
chez Yahoo!. Si vous n'avez pas de compte, creez-en un sur http://www.flickr.com/ 
signup : 

1 Choisissez le lien Sign Up sur la droite. 

2 Saisissez les champs necessaires. Attention, le code de confirmation est sensible 
aux majuscules/minuscules. Utilisez une adresse electronique valide, car vous y 
recevrez un lien d'activation de compte. 
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3 Recuperez votre courriel de bienvenue et suivez son lien d'activation. 

4 Choisissez un nom de compte Flickr, qui peut etre different de votre nom de 
compte Yahoo! 

5 Activez le bouton Sign In. 

A present que vous etes connecte(e), demandez une cle en allant sur http:// 
www.flickr.com/services/api/key.gne : 

1 Verifiez votre nom et votre adresse electronique. 

2 Si vous demandez ici une cle pour une utilisation commerciale, cochez le bouton 
radio correspondant. Attention toutefois, le service dans un contexte commercial 
est generalement payant... 

3 Decrivez rapidement l'utilisation que vous allez faire de la cle (par exemple, « I'm 
going to use it to explore your services while reading a book that uses Flickr 
REST examples ». 

4 Cochez la case I agree to Flickr APIs Terms of Use. 

5 Activez le bouton Apply. 

6 Et voila ! Votre cle s'affiche. Copiez-collez-la en lieu sur. 

Prenez le temps de lire le contrat d'utilisation de l'API. II s'agit surtout de respecter 
les regies en vigueur sur Flickr, de respecter la propriete intellectuelle, et de reagir 
avec diligence aux demandes des proprietaires de photos que vous exposez a travers 
votre application. La page decrivant les conditions d'utilisation est plutot claire, ne 
manquez pas de la parcourir. 

Format general des requetes et reponses REST chez Flickr 

Vous pouvez verifier que votre cle est active en utilisant la methode (l'operation, si vous 
preferez) f 1 i ckr . test . echo, comme ceci, en precisant evidemment votre cle reelle : 

http : //api . f 1 i ckr . com/servi ces/rest/ 

?method=f 1 i ckr . test . echo&opi ni on=PasMal CeBouqui n&api_key=VOTRE_CLE_ICI 

Vous devez obtenir un resultat XML comme celui-ci : 

<?xml version="1.0" encoding="utf-8" ?> 

<rsp stat="ok"> 

<method>f 1 i ckr . test . echo</method> 

<opi ni on>PasMal CeBouqui n</opi ni on> 

<api_key>VOTRE_CLE_ICI</api_key> 

</rsp> 
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D'une maniere generale, une requete REST Flickr utilise toujours le point d'acces 
suivant : 



I http://api 



flickr.com/services/rest/ 



L'operation et le type de ressource voulus sont encodes dans la methode, un parametre 
method dont le nom utilise une syntaxe hierarchique a points, comme les methodes 
flickr. blogs.getList, flickr .groups. browse ou flickr. photos .addTags. 

On doit obligatoirement preciser la cle API a travers le parametre api_key. Le reste 
depend de la methode. Flickr n'utilise que les verbes HTTP GET et POST, ce qui nest 
pas toujours semantiquement approprie, mais ce n'est pas tres grave. 

Une reponse REST Flickr a deux formats possibles. Soit l'appel a reussi, et on 
obtient ce type de contenu. 

Listing 8-33 Une reponse REST Flickr en cas de succes 

<?xml version="1.0" encoding="utf-8" ?> 

<rsp stat="ok"> 

Contenu specifique a la methode ici 

</rsp> 

Soit l'appel a echoue, et on obtient ce type de contenu. 
Listing 8-34 Une reponse REST Flickr en cas d'echec 

<?xml version="1.0" encoding="utf-8" ?> 
<rsp stat="fail"> 

<err code="code-erreur" msg="message-erreur" /> 
</rsp> 

II est done facile de detecter un probleme rien qu'avec 1'attribut stat de 1' element 
racine rsp (cheminXPath : /rsp/@stat). 

Preparer le terrain 

Commencez par creer un repertoire de travail f 1 i ckr, et copiez-y le serveur . rb d'un 
des deux exemples precedents. Recreez aussi doc root, son sous-repertoire ajaxslt et 
un sous-repertoire xsl vide. Vous pouvez aussi preparer des squelettes pour 
index.html, client. ess, client.js, et les quatre feuilles XSLT que nous allons 
utiliser : photoset.xsl, photoset_owner.xsl, photoset_photos.xsl et photo. xsl. 

Notre page etant generee presque entierement suite a des requetes Ajax, nous avons 
un fichier i ndex. html au corps plutot simple. 
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Listing 8-35 Notre page, index.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

*• charset=iso-8859-15" /> 
<title>Les jeux de photo de Tristan…</title> 
<link rel="stylesheet" type="text/css" href="client .css"x/script> 
<script type=" text/ javascript" src=" prototype. js"x/script> 
<scri pt type="text/javascri pt" 

•» src="scri ptacul ous . j s?l oad=ef fects , dragdrop"x/scri pt> 
<scri pt type="text/javascri pt" src="ajaxslt/mi sc . js"x/scri pt> 
<script type=" text/ javascript" src="ajaxslt/dom. js"x/script> 
<script type=" text/ javascript" src="ajaxslt/xpath. js"x/script> 
<script type=" text/ javascript" src="ajaxslt/xslt . js"x/script> 
<script type=" text/ javascript" src=" client. js"x/script> 
</head> 
<body> 

<div id="indicator" style="display: none;"x/div> 

<div id="results"x/div> 

<div id="photo" style="position: absolute; display: none"> 

<span i d="photo-cl oser"> [x] </span> 

<div id="photo-contents"x/div> 
</div> 

</body> 
</html> 

Remarquez le chargement de dragdrop. js, qu'il vous faudra done recuperer dans 
script.aculo.us (en revanche, nous n'utilisons plus controls, js). Le corps de la page 
sera dans results, tandis que photo est un conteneur destine a afficher, en surplomb 
du contenu normal, une photo individuelle. Une pseudo-case de fermeture figurera 
en haut a droite. 

Voyons a present une premiere version de la feuille de styles. 
Listing 8.36 Le debut de notre feuille client.css 

* { 

font-size: lem; 

} 
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body { 

font-family: sans-serif; 
} 

#indicator { 

position: absolute; 

left: lOpx; top: lOpx; height: 16px; width: 20em; 

font-size: 14px; line-height: 16px; 

background: url (spinner.gif) no-repeat; 

padding-left: 20px; 

color: gray; 
} 

#results { 

margin-top: 36px; 
} 

Rien de bien mediant. Remarquez que cette fois, on positionne l'indicateur en haut 
de la page, toujours afin qu'il ne sursaute pas quand on modifie le contenu... 

Notre script cl i ent . j s reprend par ailleurs quelques fragments desormais classiques, 
que nous completerons par la suite. 

Listing 8-37 Squelette initial de notre client.js 

function initPageO { 

new DraggableC photo ' , {}); 

} // initPage 

Ajax . Responders . regi ster({ 

onException: function(requester, e) { 
$(' indicator') .hide() ; 
alert(e) ; 
} 

}); 

logging = false; 

Event. observe(window, 'load', initPage); 

Remarquez qu'on peut deja definir le conteneur photo comme etant deplacable par 
glissement. L'argument d'options vide est la pour corriger un tees leger souci (pas 
d'opacite partielle au glissement) dans script.aculo.us 1.6.3-4, qui sera corrige en 1.6.5. 
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Chargement centralise parallele des feuilles XSLT 

Nous commencons a avoir de nombreuses feuilles a charger. Le code que nous avions 
ecrit jusqu'ici les chargeait sequentiellement, et au prix d'imbrications parfois com- 
plexes de new Aj ax. Request... Pour eviter cela, nous pouvons ecrire un petit objet 
apte a charger autant de feuilles XSLT qu'on le souhaite, en parallele qui plus est. 

Cet objet pourrait avoir un hash nomme sheets, dont les cles seraient les noms de ses 
proprietes finales (qui contiendront le DOM des feuilles), et les valeurs seraient les 
« noms racines » des fichiers. On supposerait en effet que toutes les feuilles serait 
dans le meme repertoire, et aurait la meme extension. Cet objet pourrait charger ces 
feuilles en parallele, exposer le DOM obtenu pour chacune sous forme de propriete, 
et prevenir une fonction de rappel quand toutes les feuilles ont ete chargees. 

Tout ceci semble complexe, mais en realite, cela n'utilise rien de tees difficile. 
Regardez l'objet anonyme suivant, que nous allons placer au debut de notre fichier de 
script client, js. 

Listing 8-38 Notre chargeur parallele de feuilles XSLT 

var gXSLT = { 

_"loaded: false, Q 

sheets: { © 

photoset: 'photoset', 

owner: 'photoset_owner' , 

photos: ' photoset_photos' , 

photo: 'photo' 
}, 

load: function(onComplete, expose) { Q 

if (this._loaded) 
return; 

this ._exposeSheets = false !== expose; Q 

this ._onComplete = onComplete; 

this ._loadCount = 0; 

this._sheetCount = $A($H(this. sheets) . keysO) .length; 

for (var s in this. sheets) 
thi s ._loadSheet(s) ; 
}, 

_loadSheet: function(sheet) { 

new Ajax. Request('/xsl/' + this. sheets [sheet] + '.xsl', { 

method: 'get' , 

onSuccess: this._sheetLoaded.bind(this , sheet) 

}); 

}, 
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_sheetLoaded: function (sheet, requester) { 

this .sheets [sheet] = xmlParse(requester . responseText) ; 
if (this._exposeSheets) { 

if (undefined !== this [sheet]) 

alert('Cannot expose sheet ' + sheet + 
*» ': property exists.'); 
this [sheet] = this. sheets [sheet] ; 
} 

if (++this._loadCount >= this._sheetCount) { 
this._loaded = true; 

(this ._onComplete || Prototype. EmptyFunction) () ; 
} 
} 
}; // gXSLT 

Voyons certains fragments de plus pres... 

O Ce drapeau nous permettra d'ignorer des appels multiples a load. 

C'est la qu'on definit les feuilles a charger. Nous avons ici, par exemple, une 

feuille de nom racine photoset_photos dont le DOM devra etre expose dans une 

propriete photos. 
C'est cette fonction qui est destinee a etre appelee de l'exterieur : elle declenche le 

chargement parallele. On lui transmet une fonction de rappel (optionnelle), et 

eventuellement un drapeau indiquant si on doit exposer les DOM obtenus sous 

forme de proprietes de l'objet gXSLT. 
En utilisant la difference stricte !==, nous obtenons true dans tout autre cas que 

false specifiquement (done null ou undefined donnent true), ce qui fait que 

true est la valeur par defaut. 

Petite astuce pour obtenir le nombre de proprietes dans sheets, done de feuilles a 

charger: on en fait un Hash, on prend keys(), on convertit en tableau, et on 

appelle length. 
Voila comment exposer le DOM sous forme de propriete directe (gXSLT. photo 

plutot que gXSLT. sheets. photo, qui marche aussi, ceci dit). Remarquez qu'on 

hurle si une telle propriete existe deja. 
Void un code typique de Prototype ! Cela nous evite un i f pour tester qu'on nous 

a bien transmis une fonction de rappel. C'est la raison d'etre de 

Prototype . EmptyFunction. 

Obtenir les informations du jeu de photos 

II est temps a present d'attaquer le requetage. Nous allons commencer par recuperer 
les informations du jeu de photos qui nous interesse. Toutes les requetes Flickr ayant 
la meme structure de base, nous allons utiliser quelques « constantes » de bon aloi. 
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Listing 8-39 Definition du requetage 

FLICKR_API_KEY = 'VOTRE_CLE_ICI ' ; 

FLICKR_ENDPOINT = ' http : //api . f 1 i ckr . com/servi ces/rest/ ' ; 

FLICKR_TEMPLATE = new Tempi ate ( 

FLICKR_ENDPOINT + ' ?method=flickr .#{method}&api_key=' + 

FLICKR_API_KEY + '#{extraArgs} ' ) ; 

PHOTOSET_ID = 1603279; // Ou 1583292... 

Comme toutes les methodes Flickr commencent par « f 1 i ckr . », nous allons en dis- 
penser le code qui suit, en utilisant statiquement ce prefixe. Remarquez que nous 
pourrons preciser les arguments specifiques a la methode a l'aide d'une propriete 
extraArgs. Nous devrons done passer a FLICKR_TEMPLATE un objet avec deux 
proprietes : method et extraArgs. 

Penchons-nous done sur les informations inherentes au jeu de photos. Nous sommes 
interesses par son titre, sa description, son nombre de photos, sa photo representative 
(une des photos du jeu, mise en avant) et son proprietaire. Ce dernier point necessi- 
tera d'ailleurs une deuxieme requete, car au niveau du jeu de photos (le photosei), 
nous n'avons que l'identifiant (NSID) du proprietaire. 

Void le resultat XML que Flickr envoie pour le jeu 1603279. 
Listing 8-40 La reponse REST de Flickr pour un jeu de photos 

<?xml version="1.0" encoding="utf-8" ?> 

<rsp stat="ok"> 

<photoset id="1603279" owner="19663157@N00" primary="73723635" 
*» secret="a9f7246444" server="20" photos="46"> 
<title>Portraits of Mozillians</title> 
<description>Taken during lunch time on Dec. 8th, 2005 

</description> 

</photoset> 

</rsp> 

Que voit-on dans ce resultat ? 

• L'element racine est photoset. 

• Les informations necessaires a l'identification de sa photo representative sur les 
serveurs de photos Flickr (stati c . fl i ckr . com) sont les attributs server, pri mary 
et secret. Nous expliquerons cela en detail plus loin. 

• Le nombre de photos est dans l'attribut photos. 

• L'identifiant du proprietaire est dans l'attribut owner. 

• Le titre et la description sont dans les elements fils. 
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Cette grappe est plutot simple. Pour revenir sur les attributs d'identification de la 
photo, il faut savoir que chez Flickr, une photo dispose de plusieurs versions de son 
fichier, en differentes tailles. Ces versions sont mises a disposition sur toute une 
ferme de serveurs de ressources statiques, accessibles w'astati cflickr.com. L'URL 
d'une photo est composee comme suit : 

http : //stati c . f 1 i ckr . com/ [serveur]/ [id]_[secret] [_tai lie] . [format] 

LID d'une photo correspond ici a l'attribut primary du photoset. La partie secret 
est la pour obliger les systemes clients a requeter l'API afin d'obtenir les informations 
necessaires, diminuant ainsi considerablement les risques de saturation, d'utilisation 
non autorisee, et d'attaque en deni de service. 

La taille peut etre l'une des valeurs suivantes : 

• _s (square) pour la vignette carree (destinee a un affichage en masse, comme dans 
la page d'un jeu de photos, ou dans notre propre page pour ce chapitre) ; 

• _t [thumbnail) pour la vignette ; 

• _m {medium) pour la petite taille (environ 50 %) ; 

• rien pour la taille moyenne, destinee a l'affichage par defaut ; 

• _o (original) pour la photo originale. 

Une photo ha pas forcement toutes ces variantes disponibles. On peut demander la 
liste des tailles d'une photo (dimensions, URL, etc.) avec la methode 
flickr. photos .getSizes. 

Enfin, le format de toutes les versions derivees est j pg. La version originale a un format 
precis, qu'on obtient en demandant les informations pour la photo en question. 

Pour notre en-tete de jeu de photos, nous utiliserons la petite taille de la photo repre- 
sentative. Void la feuille xsl/photoset.xsl, qui transforme cette grappe en ce qui 
nous interesse. 

Listing 8-41 La feuille XSLT xsl/photoset.xsl 

<?xml version="1.0" encoding="iso-8859-15"?> 
<xsl : stylesheet version="1.0" 

•» xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl : tempi ate match="/"> 

<xsl :apply-templates select="/rsp/photoset"/> 
<xsl :apply-templates select="/rsp/err"/> 
</xsl : tempi ate> 
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<xsl : tempi ate match="photoset"> 
<div id="photoset"> 

<xsl:element name="img"> 
<xsl : attribute name="id"> 

<xsl : value-of select="@id"/> 
</xsl :attribute> 
<xsl : attribute name="src"> Q 

http://static.flickr. com/<xsl : value-of 

select="@server"/>/<xsl :value-of select="@primary"/> 
_<xsl :value-of select="@secret"/>_m. jpg 
</xsl :attribute> Q 
</xsl :element> 

<hlxxsl :value-of select="title"/></hl> 

<p class="description"xxsl :value-of select="description"/></p> 
<p class="photoCount"> 

<xsl :value-of select="@photos"/> 
photo<xsl:if test="@photos > l">s</xsl :if> 
de 

<span id="photoset-owner"x/span> Q 
</p> 
</td> 
</xsl : tempi ate> 
<xsl :template match="err"> 
<p class="error"> 

Erreur n° <xsl : value-of select="@code"/>  : 
<xsl :value-of select="@msg"/> 
</p> 
</xsl : tempi ate> 
</xsl : stylesheet> 

La aussi, nous prenons la peine de fournir une representation en cas d'erreur. Notez 
la composition de l'attribut src pour l'image, de la ligne Q a la ligne Q : elle suit 
notre schema. Nous sommes obliges de « coller » les composants pour eviter les 
espaces dans FURL, qui pourraient troubler Flickr. 

Remarquez aussi qu'en ©, nous avons pris la peine de gerer le pluriel. Quant au span 
en 0, il est vide car nous n'avons pas encore le nom, ni l'URL de profil, du 
proprietaire : pour les avoir, il nous faudra une deuxieme requete, que nous ferons plus 
loin. En mettant un ID au span, nous pourrons mettre a jour son contenu plus tard. 

Avant d'aller plus loin, pensez a realiser un squelette XSLT valide pour les trois 
autres fichiers XSL references par gXSLT. sheets : sans eux, nous aurons une erreur 
de traitement, et notre fonction de rappel, qui doit requeter les informations du jeu 
de photos, ne sera jamais appelee. 
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Ceci etant assure, nous allons pouvoir realiser la fonction getPhotoset, qui va cher- 
cher un jeu de photos dont on lui donne l'identifiant. 

Listing 8-42 Notre fonction getPhotoset 

function getPhotoset (id) { 
$(' results') . update (' ') ; 
var url = FLICKR_TEMPLATE.eva"luate({ Q 
method : ' photosets . getlnfo ' , 
extraArgs: '&photoset_id=' + id 

}); 

new Ajax.RequestC/xmlProxy ' , { 
method: 'get' , 

parameters: 'url=' + encodellRIComponent(url) , 
indicator: 'indicator', 
onSuccess: function(requester) { 

var data = xmlParse(requester. responseText) ; 

var ctx = new Exp rContext (data) ; 

var ownerNSID = xpathEval ('/rsp/photoset/@owner ' , 

ctx) . stringValueO ; 

var html = xsltProcess(data, gXSLT.photoset) ; 

$(' results') .update(html) ; 

// Ici , il faudra aller chercher plus d'infos... 
} 

}); 

} // getPhotoset 

Cette fonction n'a rien de revolutionnaire. Remarquez tout de meme en le meca- 
nisme que nous utiliserons a chaque fois pour construire un appel REST a Flickr, et 
en 0, l'extraction manuelle du NSID de l'utilisateur Flickr proprietaire du jeu de 
photos. Nous allons en avoir besoin, la ou se trouve pour l'instant un commentaire, 
pour aller chercher les informations complementaires sur le proprietaire, afin de les 
afficher dans photoset-owner. Remarquez enfin la transformation, qui va 
chercher la feuille dans notre propriete exposee gXSLT. photoset. 

Notre fonction etant prete, il ne nous reste plus qua completer l'initialisation de 
notre page. 

Listing 8-43 Une initialisation un peu plus complete 

function initPageO { 

gXSLT.load(functionO { 

getPhotoset(PHOTOSET_ID) ; 

}); 

new Draggable('photo' , {}) ; 
} // initPage 
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Voila : on charge les feuilles XSLT (c'est pourquoi nous vous avons demande de rea- 
liser des squelettes valides pour les trois autres), et une fois qu'elles sont toutes char- 
gees et interpretees avec succes, on appelle la fonction de rappel anonyme ci-dessus, 
qui appelle getPhotoset en lui passant notre constante PHOTOSET_ID. 

Voyons deja ou cela nous mene (figure 8-12). 



Figure 8-12 

La recuperation 

des premieres informations 
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Cela manque de cachet, tout de meme. Sans doute pouvons-nous ameliorer les 
choses en ajoutant quelques regies CSS. 

Listing 8-44 Ajouts dans client.css pour I'en-tete du jeu de photos 



#photoset hi { 

font-family: "Bistream Vera Serif", serif; 

color: #444; 

font-size: 150%; 
} 

#photoset .description { 

color: #777; 
} 
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#photoset img { 

float: left; 

margin: lem lem 0; 
} 

#photoset .photoCount { 

font-size: smaller; 

color: #444; 
} 

Notez que l'image flotte a gauche. II faudra que 1' element suivant, que nous ajoute- 
rons tout a l'heure, soit style en clear: both. Voyons le nouveau look de notre 
en-tete (figure 8-13). 



Figure 8-13 

L'en-tete avec des regies CSS 
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Voila qui n'est deja pas mal ! Evidemment, il manque quelque chose apres le « 46 
photos de ». Pour cela, il nous faut simplement une nouvelle requete, afin d'obtenir 
des informations sur l'utilisateur. La methode flickr. people. getlnfo renvoie un 
resultat du type suivant. 

Listing 8-45 Resultat XML d'une requete d'informations utilisateur 

<?xml version="1.0" encoding="utf-8" ?> 
<rsp stat="ok"> 

<person id="19663157@N00" nsid="19663157@N00" isadmin="0" 
*» ispro="l" iconserver="13"> 
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<username>nitot</username> 
<realname>Tristan Nitot</realname> 

<mbox_shalsum>4f24c004c2d5c0cfcfed422c6afe26d806616919 

</mbox_shalsum> 

<1 ocati on>Pari s , France</1 ocati on> 

<photosurl>http://www.flickr.com/photos/nitot/</photosurl> 

<prof i 1 eurl >http : //www . f 1 i ckr . com/peopl e/ni tot/</prof i 1 eurl > 

<mobi 1 eu rl>http : //www . f 1 i ckr . com/mob/photos t ream . gne?i d=62 77 52 

</mobileurl> 

<photos> 

<f i rstdatetaken>2005-01-12 16 : 37 : 44</f i rstdatetaken> 

<f i rstdate>1115996869</f i rstdate> 

<count>469</count> 
</photos> 
</person> 
</rsp> 

Remarquez que Tristan est prolifique (pres de 500 photos). Nous sommes parti culie- 
rement interesses par son nom complet et l'URL de son profil utilisateur, sur laquelle 
nous comptons lier. La aussi, une petite feuille XSLT, photoset_owner.xs"l, va 
s'occuper de tout. 

Listing 8-46 La feuille xsl/photoset_owner.xsl 

<?xml version="1.0" encoding="iso-8859-15"?> 
<xsl : stylesheet version="1.0" 

xml ns : xsl="http : //www. w3 . org/1999/XSL/Transform"> 
<xsl : template match="/"> 

<xsl :apply-templates select="/rsp/person"/> 
<xsl :apply-templates select="/rsp/err"/> 
</xsl : tempi ate> 
<xsl : template match="person"> 
<xsl: element name="a"> 

<xsl : attribute name="href"> 

<xsl :value-of select="profileurl"/> 
</xsl :attribute> 

<xsl :value-of select="realname"/> 
</xsl :element> 
</xsl : tempi ate> 
<xsl : template match="err"> 
<span class="error"> O 

Erreur n° <xsl : value-of select="@code"/>  : 
<xsl : value-of select="@msg"/> 
</span> 
</xsl : tempi ate> 
</xsl : stylesheet> 



Interagir avec le reste du monde 

Troisieme partie 



C'est sans doute la feuille XSLT la plus simple du chapitre. Nous gerons tout de 
meme les erreurs, mais comme vous pouvez le remarquer en Q< nous utilisons ici un 
span au lieu d'un p. En effet, le resultat de cette feuille est cense apparaitre dans l'ele- 
ment photoset-owner, qui est lui-meme un span. Et vous savez certainement que 
XHTML interdit les elements de type bloc dans des elements de type en ligne (ce 
qui est comprehensible). 

II nous reste a charger cette information juste apres avoir insere le fragment XHTML 
du jeu de photos dans notre DOM global. Faisons d'abord une fonction dediee. 

Listing 8-47 La fonction getOwnerlnfo 

function getOwnerlnfo(nsid) { 

var url = FLICKR_TEMPLATE.eva"luate({ 
method: ' people. getlnfo' , 
extraArgs: '&user_id=' + nsid 

}); 

new Ajax.Request('/xmlProxy ' , { 
method: 'get' , 

parameters: 'url=' + encodeURIComponent(url) , 
indicator: 'indicator', 
onSuccess: function(requester) { 

var data = xmlParse(requester. responseText) ; 

var html = xsltProcess(data, gXSLT. owner) ; 

$(' photoset-owner') .update(html) ; 
} 

}); 

} // getOwnerlnfo 

Et ajoutons un appel apres insertion du fragment conteneur, dans getPhotoset. 
Listing 8-48 Insertion de I'appel supplemental dans getPhotoset 

function getPhotoset (id) { 

onSuccess: function(requester) { 

var ownerNSID = xpathEval ('/rsp/photoset/@owner' , 

ctx) . stringValueQ ; 



} 



getOwnerlnfo(ownerNSID) ; 



}): 



} // getPhotoset 
Observons le resultat (figure 8-14). 
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Figure 8-14 

Les informations completes 
pour le jeu de photos 
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Remarquez, dans la barre d'etat, l'URL cible du lien : e'est bien l'URL de la page de 
profil de l'utilisateur. 

Recuperer les photos du jeu 

A present, il nous faut les photos du jeu de photos. Pour cela, nous allons utiliser la 
methode f 1 i ckr . photosets . getPhotos. Void un fragment du resultat. 

Listing 8-49 Fragment de resultat XML pour flickr.photosets.getPhotos 

<?xml version="1.0" encoding="utf-8" ?> 

<rsp stat="ok"> 

<photoset id="1603279" primary="73723635"> 

<photo id="73723882" secret="015c203114" server="20" 

*» title="Peter Van der Beken, aka peterv" isprimary="0" /> 
<photo id="73723841" secret="lfde5f4ce5" server="35" 
*»• title="Brendan Eich" isprimary="0" /> 

</photoset> 
</rsp> 

L'objectif est de produire un tableau de vignettes carrees, avec le titre de chaque photo 
dans les attributs alt et title des images. Le tableau ferait 10 vignettes de large. 

Realiser ce partitionnement en XSLT est vite atroce, aussi nous allons opter pour une 
astuce toute simple : nous allons generer une unique ligne avec toutes les vignettes, et 
utiliser quelques petits remplacements et une ou deux expressions rationnelles sim- 
ples, pour transformer cela en serie de lignes (tr). 
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Void deja la feuille XSLT qui va transformer le contenu XML. 
Listing 8-50 La feuille xsl/photoset_photos.xsl 

<?xml version="1.0" encoding="iso-8859-15"?> 
<xsl : stylesheet version="1.0" 

*» xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl : template match="/"> 

<xsl :apply-templates select="/rsp/photoset"/> 
<xsl :apply-templates select="/rsp/err"/> 
</xsl : tempi ate> 

<xsl : template match="photoset"> 
<table id="photoset-photos"> 
<tbody> 
<tr> 

<xsl :apply-templates select="photo"/> 
</tr> 
</tbody> 
</table> 
</xsl : tempi ate> 
<xsl : template match="photo"> 
<td> 

<xsl:element name="img"> 

<xsl : attribute name="id"> 

<xsl : value-of select="@id"/> 
</xsl :attribute> 
<xsl :attribute name="src"> O 

http : //stati c . f 1 i ckr . com/<xsl : val ue-of 
*» select="@server"/>/<xsl :value-of select="@id"/> 
*» _<xsl : value-of select="@secret"/>_s. jpg 
</xsl :attribute> Q 
<xsl : attribute name="alt"> 

<xsl :value-of select="@title"/> 
</xsl :attribute> 
<xsl : attribute name="title"> 

<xsl :value-of select="@title"/> 
</xsl :attribute> 
</xsl :element> 
</td> 
</xsl : tempi ate> 
<xsl : template match="err"> 
<p class="error"> 

Erreur n° <xsl : value-of select="@code"/>  : 
<xsl : value-of select="@msg"/> 

</p> 
</xsl : tempi ate> 
</xsl : stylesheet> 
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Rien d'extraordinaire : on retrouve notamment, de Q a ©, notre code de composi- 
tion d'URL statique pour le fichier image. Ici, nous utilisons la taille_s, pour la 
vignette carree. 

Commencons, comme d'habitude, par nous faire une fonction. 
Listing 8-51 Notre fonction getPhotosetPhotos 

function getPhotosetPhotos(id) { 

var url = FLICKR_TEMPLATE.eva"luate({ 
method : ' photosets . getPhotos ' , 
extraArgs: '&photoset_id=' + id 

}); 

new Ajax.RequestC/xmlProxy ' , { 
method: 'get' , 

parameters: 'url=' + encodeURIComponent(url) , 
indicator: 'indicator', 
onSuccess: function(requester) { 

var data = xmlParse(requester. responseText) ; 

var html = xsltProcess(data, gXSLT. photos) ; 

new Inserti on. BottomC results' , html); 
} 

}); 

} // getPhotosetPhotos 

La cle ici, c'est qu'on ne remplace pas le contenu de results : on ajoute un nouveau 
contenu en dessous de l'existant. Notre table photoset-photos apparait done sous 
photoset. 

II nous reste a appeler cette nouvelle fonction apres avoir constitue l'en-tete. Pour 
laisser a celui-ci le temps de s'afficher d'abord, nous decalerons l'appel de 100 ms. 

Listing 8-52 Modification de getPhotoset pour charger les photos 

function getPhotoset (id) { 

onSuccess: function(requester) { 

$(' results') .update(html) ; 

getOwnerlnfo(ownerNSID) ; 

window. setTimeoutC'getPhotosetPhotosC + id + ')', 100); 

} 

}); 

} // getPhotoset 

Sans les styles et sur une seule ligne, ce n'est pas terrible, mais on sent qu'on est sur la 
bonne voie (figure 8-15). 
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Figure 8-15 

La table sans les styles, 
en une seule ligne 
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Commencons par repartir cela en lignes de 10 vignettes. Pour cela, utilisons un algo- 
rithme tout simple : 

1 Partons d'un <tr>...</tr> contenant toute une serie de blocs <td>...</td>. 

2 Encadrons chaque serie de 10 blocs <td>...</td> par <tr> et </tr>. 

3 Nous allons fatalement nous retrouver avec, au debut, <trxtr> : nous retirerons 
le doublon. 

4 Sur la fin, suivant que nous avions un multiple de 10 vignettes ou non, nous trouve- 
rons soit </trx/tr>, soit </trxtd>. Dans le premier cas, nous retirerons le dou- 
blon. Dans le deuxieme, nous insererons un <tr> pour demarrer la derniere ligne. 

5 C'esttout! 

Bien sur, dans l'interet de la modularite et de la lisibilite, nous allons placer ce code 
dans une fonction, mais cela va etre court. 

Listing 8-53 Notre fonction adjustTable 

function adjustTable (html) { 

html = html . replace(/(<td>(. |\n |\r)*?<\/td>){10}/img, function(s) { Q 
return '<tr>' + s + '</tr>'; 

}); © 

html = html . replace('<trxtr>' , '<tr>') 
. replace('</trxtd>' , '</trxtrxtd>') 
. replace('</trx/tr>' , '</tr>'); 
return html ; 
} // adjustTable 
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L'expression rationnelle en Q est un peu compliquee. Le groupe entre parentheses 
represente une cellule : de <td> jusqu'au premier </td> rencontre par la suite, sachant 
qu'entre les deux on peut trouver n'importe quoi, y compris le saut de ligne ou le 
retour chariot. Le quantificateur {10} donne le nombre d'occurrences de ce groupe 
que nous souhaitons. Enfin, les drapeaux i , m et g (rien a voir avec la balise i mg de 
HTML !) indiquent respectivement que nous sommes insensibles a la casse, que 
nous travaillons sur de multiples lignes, et que nous souhaitons ici un remplacement 
global (de toutes les occurrences de l'expression, pas juste la premiere). 

Nous utilisons en Q une fonction plutot que la syntaxe $& de String, replace 
(methode native de JavaScript). En effet, Safari ne la comprend pas. 

II nous suffit maintenant d'ajuster la ligne de getPhotosetPhotos qui inserait le 
contenu : 



new Insertion. BottomC results' , adjustTable(html)) ; 

En rafraichissant, nous voyons se rapprocher la solution (figure 8-16). 



Figure 8-16 

Notre tableau a lignes 
multiples 
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Ajoutons a present quelques regies CSS. 

Listing 8-54 Ajouts a client.css pour notre grille de vignettes 

#photoset-photos { 

clear: both; 

border-width: 0; 

border-collapse: collapse; 
} 
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#photoset-photos tr { 

margin: 0; 

padding: 0; 
} 

#photoset-photos td { 

padding: 0; 
} 

#photoset-photos img { 

border: 2px solid silver; 

margin: 2px; 
} 

#photoset-photos img: hover { 

border-color: red; 

cursor: pointer; 
} 

L'impact immediat est du a clear: both dans #photoset-photos, qui place la grille 
sous 1'en-tete. Le reste vise a fournir une bordure et surligner la photo sous le curseur 
(figure 8-17). 



Figure 8-17 

Notre grille de vignettes 
terminee ! 
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Afficher une photo et ses informations 

II ne nous reste plus qua fournir un mecanisme pour afficher une photo particuliere 
lorsqu'on clique dessus, en taille par defaut, avec son titre, le nombre de ses commen- 
taires si elle en a, et la liste de ses etiquettes (tags). 

Nous avons deja le conteneur pour cet affichage : present depuis la premiere heure, 
notre conteneur photo hattend que 9a. 

Cote evenementiel, il serait stupide, voire suicidaire sur de gros volumes, de definir 
une inscription par vignette. Nous allons plutot definir un gestionnaire unique au 
niveau de results. En effet, ce dernier figure toujours dans le DOM ; nous n'avons 
done pas besoin de desinscrire ou reinscrire lors de rafraichissements eventuels. 

En revanche, cela impose quelques filtres : nous ne traiterons que les clics effectues 
sur des elements img qui figurent par ailleurs dans photoset-photos (pour eviter 
notamment le clic sur la photo d'en-tete). Les autres clics seront sans effet. 

On peut alors utiliser i'attribut id de l'image, que nous avons pris soin de definir 
dans photoset_photos . xsl. Sur la base de cet ID, on peut interroger Flickr avec la 
methode f 1 i ckr . photos . getlnf o et recuperer les informations que nous souhaitons. 
Le resultat XML pour une requete de ce type ressemble a ceci. 

Listing 8-55 Resultat XML pour une requete flickr.photos.getlnfo 

<?xml version="1.0" encoding="utf-8" ?> 

<rsp stat="ok"> 

<photo id="73723411" secret="a4a9f2246e" server="34" 

*» dateup"loaded="113462 5094" isfavorite="0" "license="l" 
*» rotation="0" originalformat="jpg"> 
<owner nsid="19663157@N00" username="nitot" 

real name="Tri stan Nitot" location="Paris, France" /> 
<title>Deb Richardson, aka dria</title> 
<description /> 

<visibility ispublic="l" isfriend="0" isfamily="0" /> 
<dates posted="113462 5094" taken="2005-12-08 21:11:28" 
*• takengranularity="0" lastupdate="1155766857" /> 
<editability cancomment="0" canaddmeta="0" /> 
<comments>2</comments> 
<notes /> 
<tags> 
<tag id="627752-73723411-2889" author="19663157@N00" 

*» raw="Fi refox">fi refox</tag> 
<tag id="627752-73723411-1860001" author="19663157@N00" 
raw="fi refox2005offsite">firefox2005offsite</tag> 
</tags> 
<urls> 
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<url type="photopage">http: //www. flick r. com/photos/ni tot/73 72 3411/ 

</url> 
</urls> 
</photo> 
</rsp> 

Vous voyez qu'on a tout le necessaire, et meme plus : l'auteur, qu'on connait deja dans 
notre cas, mais aussi la date de publication (en millisecondes), la date de prise de vue 
(format plus proche du W3DTF), celle de derniere mise a jour, les textes saisis a 
l'origine pour les etiquettes, etc. 

Notre feuille XSLT va extraire la photo en version normale (taille par defaut), et 
lister le titre, la description, le nombre de commentaires (s'il y en a), et la liste des eti- 
quettes, separees par des virgules. 

Listing 8-56 Notre feuille xsl/photo.xsl, la derniere de I'exemple 

<?xml version="1.0" encoding="iso-8859-15"?> 
<xsl : stylesheet version="1.0" 

•» xmlns:xsl=''http://www.w3.org/1999/XSL/Transform"> 
<xsl : template match="/"> 

<xsl :apply-templates select="/rsp/photo"/> 
<xsl :apply-templates select="/rsp/err"/> 
</xsl : tempi ate> 
<xsl : template match="photo"> 

<h2xxsl :value-of select="title"/x/h2> 
<xsl: element name="img"> 

<xsl :attribute name="src"> 

http : //stati c . f 1 i ckr . com/<xsl : val ue-of 
*» select="@server"/>/<xsl :value-of select="@id"/> 
_<xsl :value-of select="@secret"/>. jpg 
</xsl : attri bute> 
</xsl :element> 

<p class="description"xxsl :value-of select="description"/x/p> 
<xsl:if test="comments != 0"> 
<p class="commentCount"> 

<xsl :value-of select="comments"/> 

commentai re<xsl :if test="comments > l">s</xsl :if> 
</p> 
</xsl :if> 

<xsl:if test="tags/tag"> 
<p class="tags"> 

Étiquettes  : 
<xsl :for-each select="tags/tag"> 
<xsl : value-of select="."/> 

<xsl:if test="position() != last()">, </xsl:if> 
</xsl :for-each> 
</p> 
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</xsl :if> 
</xsl : tempi ate> 
<xsl : template match="err"> 
<p class="error"> 

Erreur n° <xsl : value-of select="@code"/>  : 
<xsl : value-of select="@msg"/> 
</p> 
</xsl : tempi ate> 
</xsl : stylesheet> 

II n'y a pas de nouveautes la non plus : nous avons deja gere des pluriels, ou separe 
des elements par des virgules (auteurs et contributeurs dans l'exemple Amazon.fr). 

II nous reste bien sur a creer la fonction qui va chercher cela. II s'agit d'un gestion- 
naire d'evenement pour le clic. 

Listing 8-57 Notre fonction handleThumbnailClick 

function handleThumbClick(e) { 
$('photo').hide(); 
Event .stop(e) ; 

var elt = Event. element(e) ; Q 
if (elt. tagName. toLowerCase() != 'img' Q 

|| !Element.childOf(elt, ' photoset-photos')) 

return; 
var url = FLICKR_TEMPLATE.evaluate({ 

method : ' photos . getlnfo ' , 

extraArgs: '&photo_id=' + elt. id 

}); 

new Ajax.RequestC/xmlProxy ' , { 
method: 'get' , 

parameters: 'url=' + encodeURIComponent(url) , 
indicator: 'indicator', 
onSuccess: function(requester) { 

var data = xmlParse(requester. responseText) ; 

var html = xsltProcess(data, gXSLT. photo) ; 

$(' photo-contents') .update (html) ; 

S('photo') .show() ; 
} 

}); 

} // handleThumbClick 

La fonction Event . el ement Q nous permet de recuperer 1' element reellement 
soumis a l'evenement : comme nous allons inscrire ce gestionnaire aupres de 
results, il pourrait s'agir de n'importe quel element dans results. Les lignes et 
suivantes appliquent l'algorithme de filtre que nous avons detaille plus haut. 
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Inscrivons maintenant ce gestionnaire en completant initPage. 
Listing 8-58 Le gestionnaire est inscrit par initPage 

function initPageO { 

gXSLT."load(functionO { 

getPhotoset(PHOTOSET_ID) ; 

}); 

Event. observeC ' results ' , 'click', handleThumbClick) ; 

new DraggableC photo' , {}) ; 
} // initPage 

Pour que cela ait un quelconque interet, il faut tout de meme jouer un peu avec CSS. 
Listing 8-59 Ajouts a client.css pour notre visualiseur de photo 

#photo { 

left: 2em; 

top: 2em; 

background: white; 

border: 2px solid gray; 
} 

#photo-closer { 

position: absolute; 

top: 0; 

right: 2px; 

font-weight: bold; 

font-size: small ; 

color: maroon; 

cursor: default; 
} 

#photo-contents { 

margin: lem 0.5em 0.5em 0.5em; 
} 

#photo h2 { 

margin: lem 0; 
} 

#photo p { 

margin: 0. 5em 0; 
} 

#photo .commentCount { 

color: #444; 
} 
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#photo .tags { 

font-size: small ; 

color: gray; 
} 

La figure 8-18 montre le resultat d'un clic. 



Figure 8-18 

Notre visualisation de photo 
individuelle 
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Ooooh !... (et au passage, je vous presente Brendan Eich, l'inventeur de JavaScript). 
En plus, on peut glisser-deplacer ! Si, si, rappelez-vous le new Draggable dans 
initPage. 

Si vous cliquez ailleurs que sur le visualiseur, mais toujours dans le rectangle de 
results, le visualiseur est masque (c'est pourquoi nous avons filtre uniquement apres 
avoir fait un $(' photo') . hideO). Ceci dit, ce serait bien que Ton puisse cliquer sur 
notre petite croix pour fermer, car c'est plus conforme aux attentes de l'utilisateur. 
Ajoutons done ceci dans le script. 
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Listing 8-60 De quoi activer la croix de fermeture 

function initPageO { 

Event .observeC results' , 'click', handleThumbClick) 
Event. observeC 'photo-closer' , 'click', closePhoto); 

new Draggable('photo' , {}) ; 
} // initPage 

function closePhoto(e) { 
Event .stop(e) ; 
$('photo').hideO; 

} // closePhoto 

On rafraichit, et voila ! 



Pour aller plus loin... 



Nous ne vous recommanderons pas d'ouvrage particulier, mais vous trouverez ci- 
apres quelques adresses precieuses : 

• Les specifications XPath et XSLT du W3C : 

— http://www.w3.org/TR/xpath 

— http://www.w3.org/TR/xslt 

• Pour demarrer, les didacticiels de W3 Schools sont decents : 

— http://www.w3schools.com/xpath/ 

— http://www.w3schools.com/xsl/ 

• Les portails des API vues dans ce chapitre : 

— http://aws-portal.amazon.com/ 

— http://www.weather.com/services/xmloap.html 

— http://www.flickr.com/services/api/ 

• Quelques autres API REST de premier plan : 

— Google : http://code.google.com/apis.html 

— Yahoo! : http://developer.yahoo.com/ 

— eBay : http://developer.ebay.com/developercenter/rest 
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L' information a la carte : 
flux RSS et Atom 



Le Web 2.0, c'est aussi la mutualisation des contenus, l'echange standardise d'informa- 
tions entre sites, au travers de formats de flux. Les deux principaux formats a ce jour 
sont RSS et Atom. Les deux sont tres employes, aussi analyserons-nous les deux, a titre 
d'exemple, au travers d'un service de breves et d'un blog technique tres populaire. 

Techniquement, ce chapitre ne differe guere du precedent : vous retrouverez nos 
requetes Ajax en GET recuperant un contenu XML, et des transformations XSLT 
cote client. Vous retrouverez aussi, necessairement, notre couche serveur dans le role 
de l'intermediaire permettant d'eviter les problematiques de securite sur le navigateur. 
Cependant, l'utilisation que nous en ferons est differente. Nous ne dialoguerons pas 
avec une API, mais nous recupererons un document regulierement mis a jour. 
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Apercu des formats 

Voyons d'abord rapidement d'ou viennent les formats RSS et Atom, avant de lister 
les informations qu'ils fournissent generalement. Nous terminerons cette introduc- 
tion avec un point sur la delicate question de l'incorporation de contenu HTML 
dans le flux. 

Une histoire mouvementee 

RSS et Atom ont deux histoires tres differentes, quoique liees. 

RSS 0.9x et 2.0 : les « bebes » de Dave Winer 

RSS est le premier format populaire de syndication. Mis au point par Dave Winer, 
sur la base de travaux originaux chez Netscape, pour des services comme Radio User- 
land, le format Really Simple Syndication a connu plusieurs versions successives : 0.91, 
0.92, 0.93, 0.94 et finalement 2.0 (nous reviendrons dans un instant sur la myste- 
rieuse absence de 1.0 dans cette liste). Tous ces formats partagent les memes 
caracteristiques : 

• lis sont « specifies » au moyen d'un vague document en ligne, illustre par quelques 
exemples, le tout etant tres insuffisant pour permettre des implementations fia- 
bles et interoperables. 

• lis sont le travail exclusif de Dave Winer, sans concertation aucune avec la com- 
munaute qui grandissait autour de ces formats. 

• Enfin, ils sont entierement dedies a une utilisation de type blog, ce qui entraine 
de severes limitations pour une utilisation plus large. RSS 2.0 dispose toutefois 
d'un mecanisme de modules, qui permet l'extension du noyau d'elements pour 
des utilisations specialisees. 

La page officielle de RSS 2.0 est http://blogs.law.harvard.edu/tech/rss. 

RSS 1.0 : une approche radicalement differente 

La version 1.0 est radicalement differente et elaboree par par un groupe de travail 
officieux n'incluant pas Dave Winer. Ici, RSS signifie RDF Site Summary. Les diffe- 
rences sont nombreuses : 

• RSS 1.0 est base sur RDF {Resource Description Framework), un langage a balises 
au cceur des travaux du Web semantique, qui est assez verbeux et quelque peu 
redondant, mais offre une structure uniforme pour tous types de donnees et de 
relations entre les donnees. 
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• RSS 1.0 est concu pour etre extensible, avec un noyau precisement defini et le reste 
des fonctionnalites reparti dans des modules. Trois modules sont « officiels » : le 
tres vaste module Dublin Core (metadonnees), le module Syndication (frequence 
des mises a jour) et le module Content (gestion de contenus incorpores quelcon- 
ques). On compte plus d'une vingtaine de modules proposes. 

• RSS 1.0 est clairement specifie et ne laisse pas de parts d'ombre. 

C'est un bon format, mais il est un peu trop lourd pour son utilisation concrete et 
engendre trop de complexite pour les cas usuels. En revanche, il est fiable, au sens ou 
il permet de systematiquement lever l'ambiguite dans ses contenus. 

La page officielle de RSS 1.0 est http://web.resource.Org/rss/1 .0/. 
Atom, le fruit de la maturite 

Apres l'apparition de RSS 1.0, Dave Winer, furieux, a immediatement renomme sa 
version 0.94 en RSS 2.0, pour « conserver l'avantage », et a declare RSS comme 
« gele » : le format etait definitif, et toute extension devrait se faire au travers de 
modules ; par ailleurs, on ne pouvait pas utiliser le terme « RSS » pour designer un 
autre format a l'avenir. En somme, il a fait l'enfant. 

Le probleme, c'est que RSS etait tres populaire et pourtant tres problematique. De 
tres nombreux cas de figure n'etaient pas encodables de facon satisfaisante dans le 
format : on aboutissait toujours au mieux a du contenu ambigu, au pire a des 
impasses. 

Un groupe de travail s'est done cree, qui a rapidement trouve un statut officiel au sein 
de 1'IETF, l'organisme responsable de la plupart des standards et formats qui font 
vivre Internet. Lobjectif etait de fournir un format qui soit : 

• simple ; 

• clair ; 

• totalement specifie (aucune zone d'ombre) ; 

• sans ambiguite aucune dans les contenus produits ; 

• au moins equivalent a RSS 2.0 et RSS 1.0 en fonctionnalites ; 

• capable d'incorporer facilement n'importe quel contenu, binaire, textuel balise ou 
textuel quelconque ; 

• standard officiel. 

En decembre 2005, sous la forme de la tres officielle RFC 4287, ce format a vu le 
jour, avec en bonus un protocole REST de publication de contenu baptise Atom 
Publishing Protocol. 

La page officielle du format est http://tools.ietf.org/html/rfc4287. 
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Informations generiques 

Tous ces formats de flux fournissent toujours les memes informations, peu ou prou, 
avec plus ou moins de details, de fiabilite ou d'interoperabilite. On trouve d'abord 
deux grands niveaux : 

• le flux lui-meme (le channel RSS ou \e feed Atom) ; 

• les entrees individuelles du flux (les items RSS ou les entries Atom). 

D'un flux a l'autre, les entrees individuelles peuvent contenir la totalite de l'informa- 
tion, ou simplement un abrege, voire une simple reference a la ressource complete sur 
leWeb. 

Pour le flux lui-meme, on dispose generalement des informations suivantes : 

• son titre ; 

• une URL de ressource correspondante sur le Web ; 

• sa description sommaire ; 

• sa langue ; 

• ses dates de premiere parution et de derniere mise a jour ; 

• ses informations legales (auteur, copyright, etc.) ; 

• une identite visuelle eventuelle (par exemple le logo de l'editeur). 
Pour une entree individuelle, on trouve souvent : 

• son titre ; 

• une URL vers la ressource complete ; 

• un identifiant unique ; 

• tout ou partie de son contenu ; 

• ses dates de premiere parution et de derniere mise a jour ; 

• des informations de categorie ; 

• son ou ses auteur(s). 

Le casse-tete du contenu HTML 

Tous ces formats de flux reposent au final sur XML. II s'agit de documents balises, 
qui se doivent de constituer des document XML correctement formes. lis repondent 
a une grammaire, theoriquement formalisee dans un document dedie (DTD, schema 
XML ou Relax NG) ; toutefois, RSS 2.0 ha pas de grammaire formalisee. 

Les contenus HTML et XHTML utilisent eux aussi des balises. En HTML, le 
balisage ne constitue pas forcement du XML correctement forme : on peut se passer 
de fermer des balises, d'encadrer des valeurs d'attributs par des guillemets, d'utiliser 
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une casse specifique... On peut meme entrelacer les elements plutot que de respecter 
une imbrication coherente ! Un tel contenu, utilise tel quel, « casserait » done le flux. 

Quand bien meme le contenu est du XHTML valide, sa grammaire ne fait pas partie 
de celle du format de flux dans lequel on souhaite l'incorporer. Pour permettre aux 
analyseurs XML de s'y retrouver en lisant le flux, il faut avoir recours soit a l'enco- 
dage (typiquement, RSS 2.0), soit aux espaces de noms (solution 100% XML 
employee par RSS 1.0 et Atom), ce qui exige toutefois un traitement plus perfec- 
tionne cote client. 

Au final, RSS 2.0 trouve ici ses limites, avec un probleme dit du « double encodage ». 
Sans entrer dans les details, on peut tomber sur des cas ou, en analysant un contenu 
d'element description, on nest pas en mesure de determiner avec certitude si un 
fragment doit etre « decode » ou non. 

Atom et RSS 1.0 n'ont pas ce probleme. Atom en particulier, au travers de son ele- 
ment atom: content, permet l'encapsulation facile de n'importe quel type de 
contenu : textuel, XHTML, et meme binaire. 

Passons maintenant a la pratique. 



Recuperer et afficher un flux RSS 2.0 



Pour illustrer l'utilisation d'un flux RSS 2.0 (qui est de loin la variante RSS la plus 
employee), nous allons consulter les breves « Client Web » publiees par le Journal du 
Net Developpeurs, publication en ligne du Benchmark Group. 

Ce flux contient des informations succinctes (ce qu'on appelle classiquement des 
« breves ») centrees sur l'univers des technologies web cote client (typiquement le 
sujet de ce livre). Ladresse du flux RSS 2.0 pour ces breves est http://developpeur. 
journaldunet.com/rss/breve/client-web/. Si vous vous y rendez, vous tombez pourtant 
sur un document XHTML tout ce qu'il y a de plus banal. Ou done se trouve le flux ? 

Devant vous. Vous etes en fait en train de consulter un document XML dote d'une 
feuille XSLT appliquee directement par votre navigateur (en tout cas sur Firefox, 
Opera et MSIE ; Konqueror par exemple n'effectue pas la transformation). 

Nous utiliserons quant a nous notre propre feuille XSLT et reformaterons d'ailleurs 
les informations de dates et les titres. 
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Format du flux 



En examinant le flux RSS en question, vous decouvrez a peu pres ceci (nous avons 
reindente, abrege des parties et retire des fragments, dans un objectif global de lisibi- 
lite de l'extrait). 

Listing 9-1 Fragments du flux RSS du JDN Developpeurs 

<?xml version="1.0" encoding="iso-8859-l"?> 
<?xml -stylesheet type="text/xsl" 
**• href="http : //devel oppeu r . jou rnal dunet . com/rss/html _i ncl ude/styl e/rss . xsl "?> 
<rss version="2.0"> O 
<channel> Q 

<title>Les brèves du Journal du Net...</title> 

<1 i nk>http: //devel oppeu r. jou rnal dunet. com/</link> 

<description>Les brèves du Journal du...</description> 

<1 anguage>f r</l anguage> 

<pubDate>Mon, 04 Sep 2006 17:23:09 +0200</pubDate> 

<lastBuildDate>Fri , 08 Sep 2006 19:00:26 +0200</lastBuildDate> © 

<copyright>© Benchmark Croup</copyright> 

<image> Q 

<title>Les brèves du Journal du Net...</title> 
<1 i nk>http : //devel oppeu r . jou rnal dunet . com/</l i nk> 
<description>Les brèves du Journal du...</description> 
<u rl >http : //devel oppeu r . j .../l ogo_j dn_devel oppeu rs . gi f </u rl > 
</image> 
<item> 

<title>Client Web &#62 ; Fi ref ox 2 en beta 2</title> 
<link>http://...ent-web/4614/fi refox-2-en-beta-2 .shtml</link> 

<guid>http://...ent-web/4614/fi refox-2-en-beta-2 . shtml</guid> 
<description>La prochaine évolution du navigateur Open Source 
se dessine à 1 'horizon : outre un raf raîchissement de son 
interface graphiq. . .</description> Q 

<pubDate>Mon, 04 Sep 2006 17:23:09 +0200</pubDate> Q 
<category domain="http:// jou rnal dunet. com/breve/client-web/"> 
*• Client Web</category> 
</item> 

</channel> 
</rss> 

L' element racine est rss Q, originellement pour laisser la porte ouverte a un emploi 
multicanaux, meme si cela n'a jamais eu lieu. On descend done encore d'un niveau 
dans channel Q, qui represents le flux a proprement parler. 

Les elements title, link et description Q sont les trois elements incontournables 
de RSS. Pour un item, description fournit soit une version abregee du contenu, soit 
le contenu total. Ici, le JDN Developpeurs a opte pour un contenu raccourci, sans 
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HTML Q, ce qui evite bien des problemes. Notez toutefois que les accents sont 
encodes en depit de la declaration du jeu de caracteres dans le prologue XML (pre- 
miere ligne), afin de se « blinder » contre les couches serveur ou client mal faites. On 
utilise ici les codes Unicode des caracteres accentues (233 pour le « e », 224 pour 
le « a », 238 pour le « i », etc.). 

En RSS, les dates et heures © sont fournies dans le bon vieux format de la RFC 822 
(pas la 2822, qui lui a succede en avril 2001 et etend les possibilites ; la 822, ce dino- 
saure datant... du 13 aout 1982, dix ans avant le Web !). Cet ancien format a toute- 
fois un avantage : il est facile a interpreter en JavaScript avec l'objet Date. 

Apres les metadonnees du flux lui-meme, on trouve son identite visuelle, exprimee 
par un logo du JDN Developpeurs et enfin un element item © par entree 
individuelle ; ici done, un item par breve. 



Preparer le terrain 

Commencez par faire un repertoire de travail rss2, dans lequel on retrouve notre bon 
vieux serveur . rb (oui, le meme que depuis le debut du chapitre 8), ainsi bien sur que 
docroot et ses sous-repertoires ajaxslt etxsl. Nous nommerons la feuille XSLT 
breves . xsl . Reduisez-la a un squelette valide. 

Dans docroot, nous retrouvons bien sur prototype. js, client. js, client. ess, 
spinner.gif et index.html. 

La page est absolument triviale : elle contient seulement l'indicateur de chargement 
et de mise en forme ainsi qu'un conteneur de resultats. Meme pas de titre ! C'est 
logique : nous utiliserons dynamiquement le titre du flux. Void i ndex . html . 

Listing 9-2 Notre page index.html, toute simple 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 

*» xml :lang="f r-FR"> 
<head> 

<meta http-equiv="Content-Type" content="text/html ; 

*• charset=iso-8859-15" /> 
<title>Les breves Client Web du JDN Developpeurs</title> 
<link rel="stylesheet" type="text/css" href="client .css"x/script> 



<scn 
<scri 
<scri 
<scri 
<scri 



<scnpt type 
</head> 



pt type="text/javascript' 
pt type="text/javascript' 
pt type="text/javascript' 
pt type="text/javascript' 
pt type="text/javascript' 
text/javascri pt' 



src=" prototype. js"x/script> 
src="ajaxslt/misc. js"x/script> 
src="ajaxslt/dom. js"x/script> 
src="ajaxslt/xpath. js"x/script> 
src="ajaxslt/xslt . js"x/scri pt> 
src=" client. js"x/script> 
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<body> 

<div id="-indicator" style="di splay: none;"x/div> 

<div id="results"></div> 

</body> 
</html> 

Voyons a present le debut de notre feuille de styles. Nous y ajouterons le necessaire 
apres avoir obtenu le contenu XHTML que nous souhaitons. 

Listing 9-3 Premier jet de client.css 

body { 

font-family: sans-serif; 

font-size: 12pt; 
} 

#indicator { 

position: absolute; 

top: lOpx; left: lOpx; 

height: 16px; width: 20em; 

color: gray; 

font-size: 14px; 

line-height: 16px; 

background: url (spinner.gif) no-repeat; 

padding-left: 20px; 
} 

#results { 

margin-top: 34px; 
} 

Pour finir, voyons le squelette classique de cl i ent . j s. 

Listing 9-4 Squelette classique restant pour client.js 

var xsltSheet; 

function showIndicatorO { 
with ($(' indicator')) { 
updateC ') ; 
show() ; 

} 
} // showlndicator 
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function hidelndicatorO { 
$('indicator') .hide() ; 
} // hidelndicator 

function initPageO { 

// Prochainement , le chargement XSLT puis flux... 
} // initPage 

Ajax.Responders . register({ onException: function(requester , e) { 
$('indicator') .hide() ; 
alert(e) ; 

}}); 

logging = false; 

Event. observe(window, 'load', initPage); 

Tout ceci doit vous sembler desormais tres familier. Passons maintenant a la defini- 
tion de notre transformation. 

La feuille XSLT 

La feuille n est pas tres compliquee. Nous allons produire un en-tete avec le logo, le 
titre et la date de derniere mise a jour, puis une liste des breves, avec leur titre en lien 
et la description courte. Dans notre cas, une liste de definitions (elements dl , dt et 
dd) est semantiquement tres appropriee. 

Void la feuille. Pour faciliter la lecture, nous avons decoupe le tout en trois templates, 
qui correspondent a l'en-tete, aux breves et au pied de liste (informations de copy- 
right). 

Listing 9-5 Notre feuille xsl/breves.xsl 

<?xml version="1.0" encoding="iso-8859-15"?> 
<xsl : stylesheet version="1.0" 

xml ns : xsl="http : //www.w3 . org/1999/XSL/Transform"> 
<xsl : tempi ate match="/"> 

<xsl :apply-templates select="/rss/channel"/> 
</xsl : tempi ate> 
<xsl : tempi ate match="channel"> 

<xsl : call -tempi ate name="header"/> 

<xsl : call -tempi ate name="body"/> 

<xsl : call -tempi ate name="footer"/> 
</xsl : tempi ate> 
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<xsl : tempi ate name="header"> 
<div id="header"> 

<P> 

<xsl:element name="img"> 

<xsl : attribute name="id">logo</xsl :attribute> 
<xsl :attribute name="src"xxsl :value-of 

•» select="image/url"/></xsl :attribute> 
<xsl : attri bute name="al t"xxsl : val ue-of 

sel ect="i mage/descri pti on"/x/xsl : attri bute> 
</xsl :element> 
</p> 
<hlxxsl :va"lue-of select="title"/x/hl> 
<p id="lastBuildDate"> 

Derniè re mise à jour  : 
<span class="timestamp"xxsl :val ue-of 

■» sel ect="l astBui 1 dDate"/x/span> 

</p> 
</div> 
</xsl : tempi ate> 
<xsl : tempi ate name="body"> 
<dl> 

<xsl : for-each select="item"> 
<dt> 

<xsl:element name="a"> 

<xsl : attri bute name="href"xxsl :val ue-of select="link"/> 
</xsl : attri bute> 
<xsl :value-of select="title"/> 
</xsl :element> 
<span class="pubDate"> 
&middot ; 

<span class="timestamp"xxsl :value-of select="pubDate"/> 
</span> 
</span> 
</dt> 
<dd> 

<pxxsl :value-of select="description"/x/p> 
</dd> 
</xsl :for-each> 
</dl> 
</xsl : tempi ate> 
<xsl :template name="footer"> 

<p class="footer"xxsl :val ue-of select="copyright"/x/p> 
</xsl : tempi ate> 
</xsl : stylesheet> 

Nous avons souligne les elements importants avec leurs classes et ID, pour vous per- 
mettre de bien voir les relations avec les regies CSS que nous ajouterons par la suite. 
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Chargement et formatage du flux 

II est temps d'ajouter le desormais traditionnel code de chargement de feuille XSLT 
puis de flux. N'ayant qu'une seule feuille, il est inutile de recourir a des objets dedies 
comme le gXSLT de l'exemple Flickr au chapitre 8. Void notre initPage. 

Listing 9-6 Notre fonction initPage terminee 

function initPageO { 

new Ajax.Request('xsl/breves.xsl ' , { 
method: 'get' , 
indicator: 'indicator', 
onSuccess: function(requester) { 

xsltSheet = xmlParse(requester . responseText) ; 
getFeedO ; 
} 

}); 

} // initPage 

Par souci de clarte et de modularite, nous avons delegue le chargement et le traite- 
ment du flux a une fonction a part, get Feed. La voici. 

Listing 9-7 Notre fonction getFeed 

FEED_URL = 'http://developpeur.journaldunet.com/rss/breve/client-web/' ; 

function getFeedO { 

$(' results') . update (' ') ; 
showIndicatorO ; 
new Ajax.Request('/xmlProxy ' , { 
method: 'get' , 

parameters: 'url=' + encodeURIComponent(FEED_URL) , 
onFailure: hidelndicator, 
onSuccess: function(requester) { 

$('indicator').update('Mise en forme&#82 30; ') ; 
var tmr = window.setTimeout(function() { 
window. clearTimeout(tmr) ; 

var data = xmlParse(requester. responseText) ; 
var html = xsltProcess(data, xsltSheet); 
$(' results') .update (html) ; 
hidelndicatorO ; 
}, 10); 
} 
}); 

} // getFeed 

II n'y a la que du grand classique. Voila, nous avons le minimum necessaire. Lancons 
serveur. rb et naviguons jusqu'a http://localhost:8042 (figure 9-1). 
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Figure 9-1 

Notre flux RSS charge 
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Evidemment, un peu de CSS ne fait jamais de mal. 
Listing 9-8 Des regies CSS pour rendre tout ceci plus joli 

#results hi { 

font-family: Georgia, serif; 

font-size: 140%; 

color: #555; 
} 

p#lastBuildDate { 

font-size: smaller; 

color: gray; 
} 

#results p. footer { 

font-size: small ; 

color: gray; 

border-top: lpx solid silver; 

margin: lem 0; 
} 

#results dl { 

margin: lem lem 
} 
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#results dt a { 

font-weight: bold; 

color: green; 
} 

#results dt a:visited { 

color: #050; 
} 

#results span.pubDate { 

color: gray; 

font-size: smaller; 

font-weight: normal; 
} 

#results dd { 

margin-left: lem; 
} 

#results dd p { 

margin: 0.3em lem 0; 

font-size: 90%; 

color: #444; 
} 

Rafraichissons, nous obtenons la figure 9-2. 



Figure 9-2 

C'est deja beaucoup mieux. 
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II nous reste tout de meme a nous occuper des dates (le format actuel nest pas tres 
agreable pour des francophones) et des titres (ce prefixe « Client Web > » est agacant). 

Ajustements des dates et titres 

Comme d'habitude, nous allons dedier une fonction adjustData a ces traitements et 
utiliser des expressions rationnelles. Si vous examinez notre feuille XSLT, vous voyez 
que nous avons isole toute date produite dans un span de classe timestamp. Quant 
aux titres, ils sont dans des elements a dont le libelle commence par « Client 
Web > ». Le code de traitement donne ceci. 

Listing 9-9 Notre ajustement de contenus 



RE_TITLE = ' (<a . *?>)C"lient Web\\s*>\\s*(.*?X</a>) ' ; 
RE_TIMESTAMP = ' (<span class="timestamp">) (. *?) (</span>) ' ; 

function adjustData(html) { 

var html = html .gsub(RE_TIMESTAMP, function (match) { 
match[2] = new Date(match[2]) .toLocaleStringO ; 
return match [1] + match [2] + match [3]; 

}); 

html = html .replace(new RegExp(RE_TITLE, 'img'), '$1$2$3'); 
return html ; 
} // adjustData 



Figure 9-3 

Notre affichage de flux RSS 
preta I'emploi 
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Evidemment, il ne faut pas oublier d'ajuster get Feed. 
Listing 9-10 Le fragment de getFeed utilisant I'ajustement 

var tmr = window. setTimeout(function() { 

$(' results') . update (adjustData(html)) ; 
hidelndicatorO ; 
}, 10); 

Apres un petit rafraichissement, nous obtenons la figure 9-3. 



Affichage plus avance et flux Atom 1.0 

A present que nous avons vu un exemple simple autour de RSS 2.0, il est temps de 
voir un exemple plus complet, autour dAtom. Nous utiliserons l'incontournable 
Standblog, le blog de Tristan Nitot, president de Mozilla Europe et fervent evange- 
liste des standards du Web depuis bien des annees. 

Le blog de Tristan tourne sur Dotclear (http://www.dotclear.com), l'excellent moteur de 
blog conforme aux standards d'Olivier Meunier. Comme la plupart des outils de blog, 
Dotclear fournit d'office des flux Atom et permet au blogueur de choisir s'il (ou elle) 
souhaite incorporer le texte complet des billets dans le flux, ou simplement un abrege. 

Tristan choisit le texte integral, balisage XHTML compris, ce qui sert parfaitement 
notre exemple : cela ouvre des possibilites amusantes cote client, avec des effets 
script.aculo.us, pour afficher d'abord les textes abreges, et faire apparaitre sur 
demande, de facon un peu vivante, les contenus complets. 

En revanche, cela va nous demander un peu de travail supplemental. En effet, 
Dotclear genere des flux Atom avec des contenus en mode HTML encode (un des 
types possibles pour i'element atom: content), ce qui signifie que le HTML est 
encode dans un noeud texte, de facon assez similaire a RSS (mais sans i'ambiguite, le 
format precisant qu'on n'utilise pas de double encodage). 

Ce nceud ne peut pas etre transforme en HTML par XSLT : c'est a notre JavaScript 
de manipuler le texte du fragment XHTML resultat de la transformation. Et cette 
transformation pose quelques problemes techniques de portabilite, qui donneront 
parfois du code un peu « a la main ». Si Dotclear produisait des elements 
atom : content recourant aux espaces de noms, nous n'aurions rien eu a faire. Olivier a 
certainement une bonne raison d'avoir precede ainsi. 
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Si ce sujet (atom: content et ses differents modes) vous interesse, il est traite dans 
tous les details, avec des exemples, pages 133 a 142 de l'ouvrage sur RSS et Atom 
mentionne en fin de chapitre. 

Notre flux Atom 

Commencons par examiner le flux Atom du Standblog. Void une vue fragmentee, 
re-indentee, etc.. 

Listing 9-11 Vue filtree du flux Atom du Standblog 

<?xml version="1.0" encoding="ISO-8859-l" ?> 
<feed xm"lns="http://www. w3.org/2005/Atom" Q 

xmlns: sy="http://purl . org/rss/l.O/modules/syndi cation/" 
xml :lang="f r"> 
<title>Standblog</title> Q 
<link rel="alternate" type="text/html" 

•» h ref="http : //standbl og . org/bl og/"/> 
<link rel="self" href=" http://standblog.org/dotcl ear/atom. php"/> 
<i d>tag : standbl og . org , 2006 : /bl og/</i d> 
<updated>2006-09-08T20 : 16 : 11+02 : 00</updated> © 

<generator version="1.2 . 5" uri="http://www.dotclear.net/">DotClear 
</generator> 

<sy : updatePeri od>dai 1 y</sy : update Peri od> Q 
<sy : updateFrequency>l</sy : updateFrequency> 
<sy:updateBase>2006-09-08T20: 16: 11+02 :00</sy:updateBase> 
<entry xml :lang="fr"> Q 

<title>En vrac, vite fait . . .</title> 

<link rel="alternate" type="text/html" href="http://standblog.org/ 
blog/2006/09/08/93114894-en-vrac-vite-fait" /> 
<updated>2006-09-08T20 : 16 : 11+02 : 00</updated> 
<i d>tag : standbl og . org , 2006-09-08 : /dotcl ear/93114894</i d> 
<authorxname>Tristan</namex/author> 
<category term="En-vrac" label="En vrac"/> 
<summary>. . .oui , encore plus vite fait que d' habitude : -) 
Michel de Cuilhermier aime iCraal (merci Yann pour le lien !) ; 
Voici une offre d'emploi pour un developpeur XUL ; 
The difficulty of simplicity... Je n'aurais pas dis mieux ! 
Adobe laisse tomber son plug-in SVC... Certes, Opera et... 
</summary> 

<content type="html"> < p> . . .oui , encore plus vite fait que 
d' habitude : -)</p&gt ; 
<ul> 

&1 1 ; 1 i &gt ; &1 1 ; a h ref =&quot ; http : //mi chel degui 1 hermi e r . typepad . com/ 
mdegblog/2006/09/brand_new_conna.html&quot ; 

hreflang=" fr">Michel de Cuilhermier aime iCraal&lt ;/a> 
(merci Yann pour le lien !)&nbsp; ;</li> 
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< li&gt ;Voici une <a href=&quot ;http://f redericdevillamil . com/ 
articles/2006/09/04/offre-demploi-d%C3%A9veloppeur-php-xul" 
hreflang="f r">offre d'emploi pour un developpeur XUL</ 
a&gt ;&nbsp; ;< /li> 

&1 1 ; 1 i &gt ; &1 1 ; a h ref =&quot ; http : //www . al 1 pee rs . com/bl og/2006/09/07/the- 
di f f i cul ty-of-si mpl i ci ty/&quot ; h ref 1 ang=&quot ; en&quot ; &gt ; The 
difficulty of simplicity</a> . . . Je n'aurais pas dis 
mieux&nbsp; !< /li> 

< li&gt ;<a href="http://georezo. net/forum/ 
viewtopic.php?pid=56305#p56305" hreflang=" fr"> Adobe 
laisse tomber son plug-in SVG&l t ; /a&gt ; . . . Certes, Opera et Fi ref ox 
integrent une parti e de la specification, mais ca n'est pas une bonne 
raison a mon sens. II faut dire que le SVC est en concurrence partielle 
avec Flash, lequel depend d'Adobe depuis le rachat de Macromedia... la 
&1 1 ; a href=&quot ; http : //www. adobe . com/svg/pdf s/ASV_EOL_FAQ . pdf&quot ; 
h reflang=" en&quot ;> FAQ de finde vie du plug-in SVC (format 
PDF)</a> est tres revelatrice&nbsp; ;</li> 

< li&gt ;Merci a Filip qui me signale que ma <a href="&quot ; 
hreflang="fr"> photo de la tour Eiffel</a> est 
reprise <a href=" http: //www. smartphone. net/smartphonethoughts/ 
software_detai 1 . asp?i d=2 520&quot ; href 1 ang=&quot ; en&quot ;&gt ; i ci&l t ; / 
a>. Dans la meme serie, elle a deja ete publiee en Nouvelle Zelande, 
et de nombreuses photos de votre serviteur servent d'exemples dans un 
&1 1 ; a h ref=&quot ; http : //gi mp4you . eu . org/1 i vre/&quot ; 
hreflang="f r">nouveau livre sur Cimp&lt ;/a&gt ; .&lt ;/li> 

</ul> 

</content> 
</entry> 

</feed> 

Vous voyez en les deux elements cles du flux : feed, element racine effectif, qui 
represente le flux (on casse done d'entree de jeu la compatibilite avec RSS), et entry, 
qui represente une entree individuelle. 

Les lignes marquees montrent un module d'extension par espaces de noms en 
action : le module officiel Syndication. Le prefixe sy est associe a FURL officielle de 
l'espace de noms pour le module, et les elements issus de cet espace emploient le pre- 
fixe. II s'agit du mecanisme fondamental d'extension en XML. Le « X » de XML, 
extensible, e'est beaucoup grace a lui. 

Vous remarquez en© qu'on retrouve title et link, meme si en Atom, link a un 
role beaucoup plus clair, tout en restant polyvalent, que dans RSS. En revanche, plus 
de schizophrenic avec descri pti on, tantot resume et tantot contenu complet : Atom 
clarifie les roles avec summary et content. 
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Vous observez en Q que les dates/heures en Atom utilisent un format recent, de plus en 
plus repandu : le W3DTF (W3C Date/Time Format). C'est tees bien, mais l'objet Java- 
Script Date n'a pas encore suivi le mouvement : ne serait-ce qu'en raison de la represen- 
tation du decalage GMT, nous ne pourrons nous contenter d'une expression rationnelle 
pour reformater et interpreter les dates : il faudra les decoder manuellement. 

Enfin, remarquez en 1' element content et son attribut type, qui vaut ici html. 
Dans ce mode, le contenu est encode : le client salt qu'il doit decoder ce contenu une 
et une seule fois (c'est-a-dire que si le decodage produit de nouvelles entites, par 
exemple avec &amp ; gt ; qui donne &gt ; , on en reste la). 

Tristan etant parfois prolifique, on se retrouve de temps en temps avec de grosses 
grappes de HTML encode a transformer, en JavaScript, en HTML normal. En 
raison de la taille globale du HTML obtenu par XSLT (qui represente tout le flux), 
nous aurions quelques problemes avec les expressions rationnelles sur certains 
navigateurs ; ainsi, Konqueror 3.5.2 « planterait » purement et simplement, tandis 
que Firefox se bornerait a 4 Ko de texte pour certaines operations relatives au deco- 
dage des entites HTML... II s'agit done de taches que nous devrons a nouveau effec- 
tuer manuellement... 

Preparation de notre lecteur de flux 

Allez, c'est parti. Vous avez du tout retenir maintenant, mais nous vous redonnons 
tout de meme les etapes habituelles : faites un repertoire de travail atom, dans lequel 
vous installez notre vaillant serveur. rb (toujours le meme), le repertoire docroot et 
ses sous-repertoires ajaxslt et xsl. La feuille XSLT sera standblog.xsl. Reduisez- 
la a un squelette valide. 

Dans docroot, vous placez bien sur prototype. js, client. js, client. ess, 
spinner.gif et index, html, comme toujours. 

La page est toujours aussi triviale : on a juste l'indicateur de chargement et de mise 
en forme, et un conteneur de resultats. Au titre pres, c'est exactement celle de 
l'exemple precedent, avec tout de meme un chargement script. aculo.us en plus, en 
prevision d'effets a venir (par consequent, ajoutez scriptaculous. js et effects, js 
dans docroot). Void le HTML. 

Listing 9-12 Notre page index.html, a peine differente de la precedente 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml" lang="fr-FR" 
**• xml :lang="f r-FR"> 
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<head> 

<meta http-equiv="Content-Type" content="text/html ; 

«• charset=iso-8859-15" /> 
<title>Le Standblog</title> 

<link rel="stylesheet" type="text/css" href="client .css"x/script> 
<script type=" text/ javascript" src=" prototype. js"x/script> 
<scri pt type=" text/ javascri pt" src="scri ptacul ous . j s?l oad=ef fects"> 
</script> 

<scri pt type="text/javascri pt" src="ajaxslt/mi sc . js"x/scri pt> 
<script type=" text/ javascript" src="ajaxslt/dom. js"x/script> 
<script type=" text/ javascript" src="ajaxslt/xpath. js"x/script> 
<scri pt type="text/javascri pt" src="ajaxslt/xslt . js"x/scri pt> 
<script type=" text/ javascript" src=" client. js"x/script> 

</head> 

<body> 

<div id="indicator" style="display : none;"x/div> 

<div id="results"x/div> 

</body> 
</html> 

Le debut de notre feuille de styles est identique a l'exemple precedent. Nous y ajou- 
terons le necessaire apres avoir obtenu le contenu XHTML que nous souhaitons, 
lequel differera tout de meme beaucoup. 

Listing 9-13 Premier jet de client.css 

body { 

font-family: sans-serif; 

font-size: 12pt; 
} 

#indicator { 

position: absolute; 

top: lOpx; left: lOpx; 

height: 16px; width: 20em; 

color: gray; 

font-size: 14px; 

line-height: 16px; 

background: url (spinner.gif) no-repeat; 

padding-left: 20px; 
} 

#results { 

margin-top: 34px; 
} 
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Cote script, nous pouvons conserver la base de l'exemple precedent, notamment la 
constante de FURL du flux (mais evidemment, ce n'est plus la meme URL), et 
l'expression rationnelle isolant les dates, en plus du code habituel. 

Listing 9-14 Squelette classique restant pour client.js 
FEEDJJRL = 'http://standblog.org/dotclear/atom.php'; 

RE_TIMESTAMP = ' (<span class="timestamp">) (. *?) (</span>) ' ; 

var xsltSheet; 

function showIndicatorO { 
with ($(' indicator')) { 
updateC ') ; 
show() ; 
} 
} // show/Indicator 

function hidelndicatorO { 
$('indicator') .hide() ; 
} // hidelndicator 

function initPageO { 

// Prochainement, le chargement XSLT puis flux... 
} // initPage 

Ajax.Responders . register({ onException: function(requester , e) { 
$('indicator') .hide() ; 
alert(e) ; 

}}); 

logging = false; 

Event. observe(window, 'load', initPage); 

Passons maintenant a la definition de notre feuille XSLT. 

La feuille XSLT et le formatage 

Nous avons conserve le principe des trois templates d'en-tete, de corps et de pied. 
Plus de logo ici, mais toujours des entrees individuelles dans une liste de definitions 
(dl, dt, dd). En revanche, nous avons deux blocs de texte par entree : 

• un paragraphe de resume visible, avec sur la fin du texte un lien d'affichage du 
contenu complet ; 

• et un conteneur initialement masque pour ce fameux contenu. 
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Nous ajoutons aussi a chaque entree sa langue, fournie dans l'attribut standard 
xml :lang des elements entry. C'est important sur le Standblog, car les billets sont 
aussi souvent en anglais qu'en francais. 

Void la feuille... 

Listing 9-15 Notre feuille xsl/standblog.xsl 

<xsl : tempi ate match="/"> 

<xsl :apply-templates select="/feed"/> 
</xsl : tempi ate> 
<xsl :template match="feed"> 

<xsl :call-template name="header"/> 
<xsl :call-template name="body"/> 
<xsl :call-template name="footer"/> 
</xsl : tempi ate> 
<xsl :template name="header"> 
<div id="header"> 

<hlxxsl :value-of select="title"/x/hl> 
<p id="lastBuildDate"> 

Derniè re mise à jour : 
<span class="timestamp"><xsl : value-of select="updated"/> 
</span> 
</p> 
</div> 
</xsl : tempi ate> 
<xsl :template name="body"> 
<dl> 

<xsl : for-each select="entry"> 
<xsl:element name="dt"> 

<xsl:copy-of select="@xml :lang"/> O 
<xsl: element name="a"> 

<xsl : attribute name="href"> 

<xsl :value-of select="link[@type=' text/html ']/@href"/> © 
</xsl :attribute> 
<xsl :value-of select="title"/> 
</xsl :element> 
<span class="pubDate"> 
&middot ; 

<span class="timestamp"><xsl : value-of select="updated"/> 
</span> 
</span> 
</xsl :element> 
<dd> 

<xsl:copy-of select="@xml :lang"/> O 
<p class="summary"> 

<xsl :value-of select="summary"/> 
<span class="toggler">[ 
<xsl:element name="a"> 
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<xs~\ : attribute name="href "> 

<xsl :value-of select="link[@type=' text/html ']/@href"/> 
</xsl : attri bute> 
Voir tout 1 'article 
</xsl :element> 
]</span> © 
</p> 
<div class="content" style="di splay: none"> 

<divxxsl :value-of select="content"/></div> 
</div> 
</dd> 
</xsl :for-each> 
</dl> 
</xsl : tempi ate> 
<xsl :template name="footer"> 

<p class="footer"xxsl : value-of select="copyright"/x/p> 
</xsl : tempi ate> 
</xsl : stylesheet> 

C'est la premiere fois que nous utilisons xsl : copy-of © dans une feuille XSLT. Cette 
instruction copie un fragment XML dans notre resultat, en tant que XML toujours : ici, 
nous recuperons l'attribut xml : 1 ang tel quel, ce qui n'a de sens que dans un xsl : el ement 
(et nous y sommes : respectivement dt et dd). Nous indiquons ainsi la langue des textes 
de l'entree, ce qui sera notamment tres utile aux logiciels lecteurs d'ecran. 

La ligne © illustre l'obtention de FURL du billet sur le Web : en Atom, les elements 
link fournissent l'URL dans leur attribut href, et non ailleurs. Nous prenons bien 
soin de choisir un lien type text/html, qui represente normalement la ressource 
(idealement, il faudrait en plus tester que l'attribut rel vaut alternate) : il pourraity 
en avoir d'autres (feuilles de styles CSS suggerees, relations hierarchiques dans un 
ensemble de documents, etc.). 

Les lignes © a © creent les liens de bascule d'affichage, en fin de chaque texte 
abrege. Pour l'accessibilite, il est bon que ces liens, dont la vocation est d'afficher le 
texte complet, amenent naturellement (attribut href) sur le billet. Nous intercepte- 
rons leur declenchement avec de Y unobstrusive JavaScript pour afficher le contenu 
deja charge, mais initialement masque. C'est le meme principe que pour un pop-up 
accessible. 



Charger la feuille et le flux 

Notre feuille est prete ; il nous reste a la charger, puis a recuperer le flux et appliquer 
la feuille. 
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Void deja initPage. 

Listing 9-16 Notre fonction initPage qui charge la feuille puis le flux 

function initPageO { 

new A j ax. Request (' xsl /standbl og. xsl ' , { 
method: 'get' , 
indicator: 'indicator', 
onSuccess: function(requester) { 

xsltSheet = xmlParse(requester . responseText) ; 
getFeedO ; 
} 

}); 

} // initPage 

Le code est presque identique a celui de l'exemple precedent : seul le nom de la 
feuille a change. Voyons a present getFeed et notre eternelle adjustData, qui ne fait 
rien pour l'instant. 

Listing 9-17 Le chargement du flux et la transformation avec getFeed 

function adjustData(html) { 

return html ; 
} // adjustData 

function getFeedO { 

$(' results') . update (' ') ; 
show/Indicator () ; 
new Ajax.Request('/xmlProxy ' , { 
method: 'get' , 

parameters: 'url=' + encodeURIComponent(FEED_URL) , 
onFailure: hidelndicator, 
onSuccess: function(requester) { 

$('indicator') .update('Mise en forme&#82 30; ') ; 
var tmr = window.setTimeout(function() { 
window. clearTimeout(tmr) ; 

var data = xmlParse(requester. responseText) ; 
var html = xsltProcess(data, xsltSheet); 
$(' results') .update(adjustData(html)) ; 
hidelndicatorO ; 
}, 10); 
} 
}); 

} // getFeed 
Et voila ! Nous pouvons lancer la couche serveur et tester (figure 9-4). 
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Figure 9-4 

Le Standblog, un peu nu, 
dans notre navigateur 
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Commencons par habiller notre Standblog en ajoutant quelques regies CSS. 
Listing 9-18 Ajouts a client. ess pour habiller le flux 

#results hi { 

font-family: Georgia, serif; 

font-size: 140%; 

color: #555; 
} 

p#lastBuildDate { 

font-size: smaller; 

color: gray; 
} 

#results p. footer { 

font-size: small ; 

color: gray; 

border-top: lpx solid silver; 

margin: lem 0; 
} 

#results dl { 

margin: lem lem 
} 
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#results dt a { 

font-weight: bold; 

color: green; 
} 

#results dt a:visited { 

color: #050; 
} 

#results span.pubDate { 

color: gray; 

font-size: smaller; 

font-weight: normal; 
} 

#results dd { 

margin-left: lem; 

font-size: 90%; 

color: #444; 
} 

#results dd p { 

margin: 0.3em lem 0; 
} 

#results dd div. content { 

margin: 0.3em lem 0; 

border: lpx solid gray; 

background: #ddd; 

padding: lem; 
} 

Le resultat est presente sur la figure 9-5. 

C'est deja mieux, meme si les dates W3DTF determent un peu. Occupons-nous 
maintenant de donner vie aux liens Voir tout I'artide, qui pour l'instant sont des liens 
classiques. 

Afficher dynamiquement les billets complets 

Une fois le flux charge, transforme et insere dans le DOM, nous devons reagir aux 
clics sur les liens de bascule pour afficher le contenu complet (present dans un div 
cache apres le paragraphe abrege) et masquer le texte abrege. 

En meme temps, utilisons script, aculo.us pour rendre l'ensemble plus joli : un fondu 
jusqu'a disparition de l'abrege, tandis que la version complete apparait en defilant 
vers le bas, le tout synchronise. Cela nous permettra de reviser le chapitre 7. 
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Figure 9-5 

L'affichage initial, habille 
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Definissons d'abord une fonction chargee de recuperer tous les liens de bascule et de 
leur affecter un gestionnaire d'evenement unique. C'est l'occasion de voir $$ en action. 

Listing 9-19 Fonction bindTogglers 

function bindTogglersO { 

$$('#resu"lts .toggler a') .each (function ("link) { 
Event. observe("link, 'click', handleToggler); 

}); 

} // bindTogglers 

Nous allons done ecrire un gestionnaire handleToggler. Notez la puissance de $$, 
qui nous fournit un enumerable de tous les elements a contenus dans un element de 
classe toggler au sein du conteneur results. Imaginez juste a quoi ressemblerait 
cette fonction sans Prototype... 

Voyons maintenant notre fonction handleToggler, qui met elle aussi Prototype lour- 
dement a contribution, en utilisant notamment des nouveautes de la version 1.5.0_rcl. 

Listing 9-20 Le gestionnaire unique handleToggler 



function handleToggler(e) { 
Event .stop(e) ; 
var toggler = $(Event .element(e)) .up(' p') ; 
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new Effect. Parallel ([ 

new Effect.BlindDown(toggler .next('div')) , 

new Effect. Fade (toggler) 
] , { duration: 2.0 }) ; 
} // handleToggler 

Voila beaucoup de Prototype en tres peu de lignes. Nous commencons par inter- 
rompre l'evenement pour eviter la navigation normale apres clic. Nous recuperons 
ensuite 1' element concerne (le lien qui a ete clique), nous le passons a $ pour obtenir 
un element garanti etendu, sur lequel nous pouvons done appeler up, ici pour 
remonter jusqu'au premier ancetre de balise p. 

Ensuite, nous creons une execution parallele de deux effets, sur une duree de deux 
secondes : un defilement bas (contenant, pas contenu) du contenu complet, masque 
jusqu'ici (attribut sty! e="di splay: none" dans le HTML), et un fondu jusqu'a dis- 
parition du paragraphe abrege (lien de bascule compris). 

Notez comment nous designons le contenu complet : en partant du paragraphe 
abrege, et en suivant ses noeuds freres vers le bas jusqu'a tomber sur un di v. Remar- 
quez au passage que la fonction up renvoyant un element garanti etendu dans 
toggle r, nous pouvons appeler next directement sur celui-ci (sans encadrer par $, 
par exemple). 

Le HTML fourni par la feuille XSLT ajoute un div a l'interieur de celui manipule 
ici, afin de permettre l'effet SlideDown au lieu de BlindDown, qui est conceptuelle- 
ment plus sympathique, mais a tendance a beaucoup clignoter sur certaines configu- 
rations. BlindDown est plus stable. Notez aussi que Fade, comme tout effet utilisant 
opacity, ne marche pas dans les versions actuelles de Konqueror : les utilisateurs de 
ce navigateur verront juste le paragraphe abrege disparaitre d'un coup, en fin d'effet. 

II ne nous reste qua appeler bi ndToggl ers apres insertion du HTML du flux dans le 
DOM de la page, au sein de getFeed. 

Listing 9-21 Ajustement de getFeed pour appeler bindTogglers 

var tmr = window. setTimeout(function() { 

$(' results') . update (adjustData (html)) ; 
bindTogglersO ; 
hidelndicatorO ; 
}, 10); 

Rechargeons et cliquons sur un lien de bascule (figure 9-6). 
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Figure 9-6 

Un resultat de bascule., 
surprenant. 
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Mais qu'est-ce que e'est que ce charabia ? Eh bien, ne vous avions-nous pas dit que le 
HTML encode etait transmis en tant que noeud texte, et qu'il allait falloir l'inter- 
preter nous-memes ? Voila, nous y sommes. Retroussons nos manches. 

Les mains dans le cambouis : interpreter le HTML encode 

Commencpons par transformer ce HTML encode en HTML decode ; nous peaufi- 
nerons avec le formatage des dates W3DTF pour finir. 



Traiter des quantites massives de HTML encode 

Le XHTML retourne par la transformation XSLT est a laisser globalement intact : 
seules les parties de contenu, en HTML encode, sont a decoder. La taille totale du 
XHTML va bloquer les methodes replace ou gsub, sans parler du unescapeHTML de 
Prototype, sur certains navigateurs. Nous allons done devoir realiser la recherche, le 
decodage et le remplacement « a la main ». 

Void le code dans adjustData qui va remplacer les fragments de HTML pour les 
contenus de billet par leur version decodee. Souvenez-vous qu'il y a deux di v imbri- 
ques dans le HTML produit : le div conteneur et un autre div simple en prevision 
d'un effet SlideDown. 
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Listing 9-22 La fonction adjustData avec le code de decodage cible 

function adjustData(html) { 

DIV_OPENER = '<ch'v class="content" ' ; 

DIV_CLOSER = '</ch'v>' ; 

var start = 0; 

var pos = html .indexOf (DIV_OPENER, start); 

var result = ' ' ; 

while (-1 != pos) { 

var openerEnd = html .indexOf ('<div>' , pos) + 5; 

result += html . substring(start, openerEnd); 

var closerStart = html . indexOf (DIV_CLOSER, openerEnd); 

result += safeUnescape(html . substring(openerEnd, closerStart)); 

start = closerStart; 

pos = html .indexOf (DIV_OPENER, start); 

} 

result += html .substring(start) ; 
return result; 
} // adjustData 

II s'agit de code de traitement de chaine bete et mechant. Voyons maintenant notre 
fonction safeUnescape, qui remplace le unescapeHTML de Prototype afin de fonc- 
tionner meme sur de gros textes quel que soit le navigateur. 

Listing 9-23 La fonction safeUnescape, ou unescapeHTML garanti 

function safeUnescape(text) { 



'quot 



i . i ii i 



for (var entity in TRANSITIONS) { 

var re = new RegExp('&' + entity + ';&apos;, 'mg'); 
text = text. replace(re, TRANSITIONS [enti ty] ) ; 

} 

return text; 
} // safeUnescape 

Decidement, ces objets anonymes comme hashes sont bien pratiques. Ici, ils nous 
simplifient la declaration des associations d'entites. Nous traitons les cinq entires 
encodees par XML (et done HTML) : les chevrons, les guillemets simples et dou- 
bles, et l'esperluette (&). Les drapeaux m et g pour l'expression rationnelle assurent un 
remplacement total sur toutes les lignes. 

Le resultat est presente a la figure 9-7. 
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Figure 9-7 

C'est beaucoup mieux ! 



Elchler Edition Affichage Ajjer a jerque pages CX4II5 Aide 



<^ - l£> - r£J Q t*£j |. . r-;tc>;tfcc allien 8042/ 



"Jf^r 



XO&acttasr* ukjGwfcles- £sCS=> aF'orrrv £ images- & ininrrtiuvinrr* QDivere* t^Encourer* E3ft«*rierretomer' SOuds- 



...aiX encore [jhjs irfe l*iil que d'hahiiude :-J Michel dc C3i.il he nrier j*rnc \Gr amI [rtngfci Y^nn pour I* Bftn !} ; Wplci Line elfrg 
d'emplol pour un developpeur XLA ; Tue- dlHtcuXy of simplicity... Je n'auroej pas dls mleun ! Adooe lals.se tomber son plug-In 
SVG... Certes. Opera et...T Voir iout [article I 

Envrac aoo& on o.'ii&:j^:jj+ojoo 



+ "l'"" P'*™* '" promnSiinB pft CiqueB avec Hug?la 

* Le OP. c'est depasse, nous expllque Lou's Nauges 

* Pour ccuk (nombreux) qui S'incfjletaicnt de la disporftian d' QpcnWcb , qu'on sc rassurc, c'eEo* un problems de. DNS 
qui ii priE un pisM Uup du Lump* it lira rtfiSki. Lc silt- csl J rtouvt'uu 111 liqr'Mi 

* QrHrtPqaCA public un CJiide i!e In Hi-let:h rei<F>r:r;KflS:le, viri UlNet. Pit: mi Iks fatiricwil,* de nirtl&iel irUoimfltiqu*,, 
lesquess continucnt a intcgrcr gj PVCli) et des RFB prc . rr.4yj mohs nnauvars la. Motorola « Lenovo 

* At nuld corilrc \u pollution : g.ouver rurur EaHfOrnieri vitrnt dc luvC fKrtsit uric loi qui for a dale 

[ r | t, M r^xfirre [Ache rfhuile 

4 I Ivre en r'an^ais s.ir ^VU 

* Window Snyder. ancenr*? de ■■'crosoFt, reioirt MoiHa eniant que respensabe Securlte. (eWeek en parie aussJt. Je 
vOus arrete tout de suite si vous vous apprctc; a foirc un (ftu do mot r ngard sur son p r cnom et la marque. Windows. 
Cest paa de sa tautfc c'est MR patron qui a commence par a'appelfir Garesl-II iSlfie/n, d^so*?). Wans le genre 
humoristlque, on rernerclera Louis Nauges , qui nous a irouve une photo de Window... avec un T-shrt Sue Screen Qi 
Death 

* MSN Scurch dcyicrtl Windows Lw Ee.urc.tj. CtSt vraimcrtt un nom ires long pour un produil, d'apres ffici. Quund 
Ir.Te.-nrl i xphr.vi ext xnrli (il y mptitxnatint Innqlflrmps] , je rfl* luM iMnwdt pOunqUCl S iMi mt n hOtll un i.::i' *U4ti 
long. II s'avere qu'aL^aurd'rujI. les gena ne dl^ent plus "Interner ixplprer". mals, tout slmplement "mtemet". ce qui e« 
flnalemerrt; ftite "e" oleu. c'est lint e met 

* NcoQ^icc 2 Beta 3 . un portage d'OpenO Fficc.org 2 pour lc Mac. est sorti recemment. NevHsFcirae lc test Pour ce 
HU'j v..; j Ti"*n ',•_'■■.■. ;a tonct BntW u ■;■! Acundons Otdfi ^v':>■ l,'i LKuge ulus inicrraif. ji bwint nu-jvellc, e'evt que 
les Mjk peuu^nt *rifri fe E« fdnrn»t Op*nOocym*nl , qi^ *M 1^1 *t*rid*rd 'XML 

* F jvllr de sifxi dtfja e^rl^Tee dan^ Wfird ?[)[)[) . I xtrafr "Microsoft ne propose pas encore die corre-ctir loglelel" 

* Propping Knowledge , ure niiia:lve irCere^^ame Ma Axel Hecht. rrosJIIen berllngis] 

* le-.^n-e Co:gn->c.j-n et c-s DRM. 3en-cflartie 

* Ce bL-r j (inuJemem Moridrivj qui acEucillera B«' Cit'T.y Purii 4 Sflmfrdi IS »p<emfcr«. On y parlera XWikj, KUL et 
Mo/illrt, Imn klV. |t lAcherai* d« p«t*4f Y <"*ir"e un tdur 



[1] Material] tres. Utilise qfui degoge dt-s substonccs tdxiques. Iocs dc so combustion : les ofoxanes... 

[2] Avec dtfs. mar'flcB comma las leers, C'ttSl quund mime riuvrunl ! 

[3] Pour les. recafcitfarrcs. a Tangiais. il corMent dc savoir que Window sc traduit par "fcnetrc" et guc Gates sc traduit par 
"Psrtf... 



Paqgsjaunes. fr contne Google Maps ^0^ ►> 09 ■■ • : 1 1 
PagesJauneR.tr. qui est dans le eollmflreur de {ioogle, ne 



f laK^.e pa f . Falre er flvflnce a grands pas. lis propnsalent dejA des 



r_ 



Les dates W3DTF 

II ne nous reste plus qua traiter les dates W3DTF. Commencons par completer 
adjustData. 

Listing 9-24 Notre fonction adjustData, terminee (fragment) 



function adjustData(htmf) { 

var html = html .gsub(RE_TIMESTAMP, function (match) { 
match[2] = w3dtfToDate(match[2]) .toLocaleStringO ; 
return match[l] + match[2] + match [3]; 

}); 

DIV_OPENER = '<div cfass="content" ' ; 
} // adjustData 

La fonction w3dtfToDate est un rien lourde... Nous utilisons une expression ration- 
nelle pour decouper le texte, un iterateur pour convertir les fragments numeriques en 
objets Number et une serie d'invocations sur un objet Date tout frais. II faut en plus 
gerer le decalage GMT. 
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Une date W3DTF a le format suivant : 
!J yyyy-mm-dd[Thh:mm[:ss] (Z| (+-)hh :mm] 

L'heure nest pas obligatoire, et quand elle est la, elle ne precise pas forcement les 
secondes. Elle precise en revanche toujours un decalage GMT, soit avec Z (zero 
decalage, done GMT), soit sous format signe numerique. Dans notre expression 
rationnelle, nous considerons que l'heure et les secondes sont toujours la. 

Pour prendre en compte le decalage, il faut stocker les donnees horaires comme s'il 
s'agissait de donnees GMT, puis appliquer un decalage oppose a celui indique. 
L'heure GMT stockee est ainsi correcte, et le formatage local, qui prend en compte 
voire fuseau horaire, affichera une heure dans voire referentiel. 

Void le code... 

Listing 9-25 La fonction de conversion w3dtfToDate 

RE_W3DTF = 'A(\\d{4})-(\\d{2})-(\\d{2})T(\\d{2}):(\\d{2}):(\\d{2}) 
([+-]\\d{2}:\\d{2}|Z)$'; 

function w3dtfToDate(text) { 

var comps = $A(text .match (RE_W3DTF)) .map (function (s , index) { 
return == index I I 7 == index ? s : parselnt(s, 10); Q 

}); 

var result = new Date(); 
with (result) { 

setUTCFullYear(comps[l]); 

set(JTCMonth(comps[2]); 

setUTCDate(comps[3]) ; 

setUTCHou rs (comps [4] ) ; 

setUTCMinutes(comps[5]) ; 

setUTCSeconds(comps[6]) ; 
} 

var utcOffset = 0; 
if ('Z' != comps[7]) { 

var sign = '-' == comps [7] .charAt(O) ? -1 : 1; 

var hours = parseInt(comps [7] .substring(l, 3), 10); 

var minutes = parseInt(comps [7] .substring(4) , 10); 

utcOffset = sign * (hours * 60 + minutes); 
} 

result = new Date(result.getTime() - utcOffset * 60000); 
return result; 
} // w3dtfToDate 

L'exclusion des indices en repose sur le fait que l'indice correspond a l'ensemble de 
l'expression (tout le texte W3DTF, qui ne nous est d'aucune utilite tel quel), et l'indice 7 
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est le decalage GMT, qui n'est jamais un simple nombre : nous voulons le conserver en 
tant que texte, pour analyse dans le bloc conditionnel (i f 'Z' != comps[7]...). 

Sauvons, rafraichissons, et void, comme sur la figure 9-8, de jolies dates en heure locale 
(qui est probablement la meme que celle du Standblog : le fuseau horaire parisien). 



Figure 9-8 

Notre affichage de flux finalise 
(texte grossi pour voir les 
dates/heures) 
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Standblog 



Derniere misea jour : dim 08 oct 2006 20:16:11 CEST 

En vrac, vite fait... dim 08 act 2006 201611 cest 
...oui, encore plus vfte fait que d'habitude :-) Michel de Guilhermier aime iGraal 
(merci ^fann pour le lien !) .: Void une offre d'emploi pour un developpeur XUL : The 
difficulty of simplicity... Je n'aurais pas dis mieux ! Adobe iaisse tomber son plug-in 
SVG... Certes, Opera eL..[ Voir tout I 'article 1 

En Vrac sam 07 oct 200G 16:32:37 CEST 
Et si on pistait les promesses politiques avec Bugzilla ? Le CD. c h est depasse, nous 
explique Louis Nauges ; Pour ceux (nombreux) qui s'inquietaient de la disparition 
d'QpenWeb, qu'on se rasa u re h c'etait un problems de DNS qui a pris un peu trop de 
temps a etre resolu. Le site est a...[ Voir tout I'article ] 



JZ 



Pour aller plus loin... 

Voila la fin des chapitres, mais il vous reste beaucoup de choses tres utiles a 
apprendre, decouvrir ou redecouvrir dans les annexes. Croyez-le, elles ont autant de 
valeur que le reste du livre, et vous y apprendrez tres probablement quelque chose. 

Dans le cadre de ce chapitre precis, voici quelques references. 



Livres 



RSS et Atom : Flh et syndication 
Heinz Wittenbrink 
Eyrolles, 8 juin 2006, 295 pages 
ISBN 2-212-11934-8 

Tout ce que vous avez toujours voulu savoir sur les formats de syndication, de leur 
histoire aux micro-details techniques, avec tous les modules RSS 1.0 et RSS 2.0. 
Atom et APP sont egalement documented. Tout est la. Vraiment tout. 
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La RFC 4287 : Atom 1.0 zXAtom Publishing Protocol 

- http://tools.ietf.org/html/rfc4287 
La « specification » RSS 2.0 

— http://blogs.law.harvard.edu/tech/rss 
La specification RSS 1.0 et ses modules 

— http://web.resource.Org/rss/1 .0/ 
La specification XSLT 

- http://w3.org/TR/xslt/ 
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Bien baliser votre contenu : 
XHTML semantique 



Au commencement etait le contenu. La toute premiere etape de la creation de votre 
page web doit etre ce contenu. II n'y a pas plus important. C'est lui qui fait la diffe- 
rence entre votre page et les autres. C'est ce contenu que voient avant tout les 
moteurs de recherche et les peripheriques alternatifs. C'est lui qui definit la valeur, le 
sens et l'identite de votre page. Vous avez le devoir, je dis bien le devoir, de lui consa- 
crer tout le soin possible. 

Ce n'est qu'une fois votre contenu defini et mis en place que vous pouvez vous poser 
la question de son aspect et de son comportement. L'aspect sera le role des CSS, et 
nous verrons a l'annexe B que leur usage ne necessite qu'extremement peu d'intru- 
sions dans votre contenu pour satisfaire vos envies les plus variees. Quant au compor- 
tement, ce sera le role de JavaScript, et si vous devez retenir une chose des chapitres 2 
et 3, c'est que son utilisation n'entache pas non plus votre contenu. 

Cette annexe commence par presenter rapidement les nombreux benefices qu'appor- 
tent la presence de contenus « propres » dans vos pages web, c'est-a-dire, pour 
l'essentiel, des contenus valides et surtout semantiques. Ensuite, vous trouverez un 
court passage en revue des contraintes syntaxiques, des elements disponibles et de 
leur utilisation pertinente, pour finir par quelques exemples concrets. 



Annexes 



Les avantages insoupconnes 



Prendre les bonnes habitudes pour creer un contenu de qualite ne rend pas le travail plus 
difficile (bien au contraire), mais apporte de nombreux benefices, parfois inattendus. 

Pour le site et ses proprietaires 

En tant que commanditaire d'un site web, qu'avez-vous a gagner a ce qu'il soit realise 
en XHTML 1 Strict, et a ce qu'il utilise un balisage rigoureusement semantique ? 

Beaucoup de choses : 

1 II sera infiniment plus comprehensible par les moteurs d'indexation et de recher- 
che. Par consequent, votre visibilite sur Google et autres, mais surtout la perti- 
nence de cette visibilite, seront grandement ameliorees. 

2 Le balisage semantique entraine automatiquement une accessibilite accrue, ce qui 
signifie que votre site est consultable par un plus large public. 

II s'agit d'abord des internautes atteints d'un handicap (visuel, moteur, cognitif), 
ce qui vous met en conformite avec les lois presentes ou a venir quant a faeces aux 
sites web pour ces personnes. 

II s'agit aussi des visiteurs utilisant autre chose qu'un ordinateur avec un grand 
ecran, un clavier et une souris : ceux navigant sur votre site a l'aide d'un Palm, 
d'un PocketPC, d'un TabletPC, d'un telephone 3G, d'un Blackberry, etc., ont par 
necessite une preference marquee pour les sites accessibles. lis constituent qui 
plus est une cible marketing interessante (adeptes de haute technologie et dispo- 
sant de moyens financiers suffisant pour se les acheter). 

3 Un tel site « pese » beaucoup moins lourd en termes d'octets. D'innombrables 
refontes completes de sites appliquant ces preceptes ont abouti a un contenu tout 
aussi riche mais beaucoup moins lourd. Consequence directe : la consommation 
de bande passante (et done son cout) diminue sensiblement, alors meme que la 
frequentation augmente (et done les revenus aussi). 

4 La frequentation du site augmente, car il n'est plus necessaire de maintenir diffe- 
rentes versions du contenu : l'utilisation des CSS permet de s'adapter automati- 
quement d'un peripherique de consultation a l'autre. Oublie, le temps ou les ver- 
sions alternatives (pour impression ou pour non-voyants) etaient souvent en 
retard sur la version principale ! Non seulement votre contenu est a jour pour 
tous, mais il devient accessible a une base plus large d'utilisateurs. Par ailleurs, 
cette centralisation du contenu signifie que sa mise a jour est plus simple et plus 
rapide : vous gagnez en parts, mais aussi en reactivite ! 

Ce cercle vertueux ne peut que generer des revenus supplementaires, qui ont tot 
fait d'amortir les couts d'une eventuelle refonte complete du site. 
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Vous retrouverez ces arguments sous un developpement different dans la section A 
quoi servent les standards ? de l'avant-propos. II contient notamment un lien vers 
l'exemple celebre du site de la chaine de sports americaine ESPN, qui constitue un 
cas d'ecole magistral, avec des chiffres impressionnants a l'appui. 

Pour le developpeur web 

Les developpeurs charges d'implementer un site respectant ces principes de qualite 
ont aussi la vie plus facile. 

1 Un document XHTML ne presente aucune ambiguite, par comparaison a un 
document HTML classique. En y placant la bonne declaration DOCTYPE, on peut 
tirer parti des validateurs en ligne pour verifier la conformite du document a sa 
grammaire imposee, sans risque d'erreur. Des validateurs identiques existent pour 
les CSS, par exemple. 

Si les proprietaires du site imposent des regies editoriales qui affectent la gram- 
maire du document, il est possible de realiser une DTD ou un schema transcri- 
vant ces contraintes pour beneficier des memes tests automatises de conformite. 

2 Un des avantages de l'univers XML est qu'il permet, grace au mecanisme des 
espaces de noms, de melanger plusieurs vocabulaires dans un meme document. 
Ainsi, en XHTML, on peut inserer des fragments de langages a balises supple- 
mentaires, comme SVG pour les graphiques vectoriels, MathML pour les formu- 
les mathematiques ou encore SMIL pour le multimedia. 

3 Un document semantique a par definition beaucoup moins de balises qu'un docu- 
ment des annees 1990, et beaucoup plus d'attributs id correctement definis : cela le 
rend plus simple a habiller avec les CSS, et plus simple a scripter en terme de DOM. 



Regies syntaxiques et semantiques 

XHTML 1 Strict est la variante stricte de XHTML. XHTML lui-meme peut se 
resumer a HTML 4.01 auquel on applique les regies syntaxiques de XML. Ces dis- 
tinctions sont signalees dans la section 4 de la recommandation pour XHTML 1.0, 
et elles sont tres simples. 
• Les documents doivent etre correctement formes. Cela signifie essentiellement 

que les balises doivent se fermer dans l'ordre inverse de leur ouverture : <bxi>... 

</i>...</b> est correct, mais <bxi>...</b>...</i> ne Test pas. Les balises ne sont pas 

comme des commutateurs, mais constituent veritablement des conteneurs : on 

doit pouvoir determiner quel element est dans quel autre. 
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• Par extension, tout element doit etre ferme. En HTML, de nombreux elements 
pourtant non vides n'etaient pas fermes par negligence : principalement 1 i et 
option, mais aussi trop souvent p. On ferme un element avec sa balise classique 
precedee d'un / : <p> devient </p>. 

• Les noms d'elements et d'attributs doivent etre en minuscules. En XML, on est 
sensible a la casse, et les grammaires formelles pour XHTML utilisent les minus- 
cules (c'est par ailleurs plus agreable visuellement). 

• Les elements vides doivent aussi etre fermes. II s'agit des elements area, base, br, 
col, frame, hr, img, input, link, meta et param. Pour fermer un element vide en 
XML, on ajoute simplement un / avant son chevron fermant. Toutefois, certains 
vieux navigateurs sont perturbes par cette notation ; aussi prend-on generalement 
la precaution d'ajouter une espace devant le /, comme ceci : 

<img src="logo.png" />. 

• Les valeurs d'attributs sont entre guillemets. Techniquement, XML autorise tant 
les apostrophes (') que les guillemets ("). Je recommande vivement, a titre per- 
sonnel, la deuxieme possibilite. 

• Les attributs bascules ont tout de meme une valeur. En HTML, certains attributs 
sont obligatoires, mais sans qu'il soit necessaire de preciser une valeur. C'est le cas 
notamment des attributs checked, compact, disabled, readonly et selected. En 
XML, un attribut a forcement une valeur. XHTML definit pour ces attributs une 
seule valeur autorisee, qui est leur propre nom. On ecrira done par exemple le code 
suivant : <option value="carrier" selected="selected">Express</option>. 

• Les navigateurs traitent les valeurs des attributs en supprimant tout espacement 
en debut et en fin de valeur, et en reduisant toute serie d'espacements interne a 
une seule espace. 

• Lattribut name n'est plus autorise pour les elements suivants : a, applet, form, 
frame, if rame, img et map. En XML, le moyen standard d'identification d'un ele- 
ment, quel qu'il soit, est 1' attribut id. Lattribut name reste valide sur les autres ele- 
ments, notamment les champs de formulaires. 

• Les valeurs par defaut des attributs sont fournies en minuscules uniquement (par 
exemple, get pour 1' attribut method de form), toujours en raison de la sensibilite 
de XML a la casse. 

• Un dernier detail : si vous utilisez des entites numeriques avec un code hexadeci- 
mal, en XHTML le x initial est forcement en minuscules : … et non 
…. 
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La DTD et le prologue 

On prendra egalement soin de toujours referencer la DTD en debut de document, 
avant 1' element ouvrant html. Un contenu de qualite utilise soit la variante Strict, 
soit la variante Frameset si vous avez des cadres (frames). Toutefois, les cadres sont 
generalement considered comme problematiques en termes d'accessibilite et de scrip- 
ting. Ne les utilisez que si vous ne pouvez absolument pas faire autrement. Void la 
declaration DOCTYPE qui devrait figurer en haut de tous vos documents : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
" http : //www . w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 

Cette declaration n'a rien de superflu : sur la plupart des navigateurs, referencer une 
DTD stricte declenche ce qu'on appelle le doctype switching, en forcant le navigateur 
a se placer en mode « respect des standards », ce qui change beaucoup de choses, 
notamment pour MSIE. D'ailleurs, toutes les ameliorations CSS de MSIE 7 ne 
fonctionneront que dans ce mode, exigeant done une declaration de DTD stricte a 
l'ouverture du document. 

Petit point de detail : un document XML (done XHTML) utilisant un encodage 
autre que UTF-8 est cense le signaler d'entree de jeu dans son prologue. II s'agit d'une 
syntaxe speciale presente des le premier octet du document, et qui ressemble a ceci : 

I <?xml version="1.0" encoding="iso-8859-15"?> 

Toutefois, MSIE 6 ne fonctionne pas correctement lorsqu'il recoit un tel document 
servi comme du (X)HTML (ce point est corrige dans MSIE 7). Aussi, on s'abstient 
pour l'instant de fournir un prologue. Heureusement, tous les navigateurs gerent cor- 
rectement la balise meta, qui fournit la meme information, a condition que vous pen- 
siez a la faire systematiquement figurer dans vos head : 

<meta http-equiv="Content-Type" content="text/html ; charset=iso-8859- 
15" /> 

La valeur initiale depend d'ailleurs de la facon dont vous voulez « servir » votre contenu. 
Ici, e'est du HTML. On peut aussi opter pour le mode « XML », qui opere quelques 
petits changements a l'usage, ce qui affecte notamment le comportement du DOM. Le 
type MIME a utiliser alors est appl i cati on/xhtml +xml . Choisir entre les deux et gerer 
les consequences fait l'objet d'un debat incessant depuis de longues annees... 
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XHTML, oui mais lequel ? 

La version actuelle est XHTML 1.1, qui est toutefois encore loin d'etre utilisee par- 
tout. Cette version n'a plus les variantes Transitional et Loose de la version 1.0 : 
elle considere qu'on ecrit desormais du XHTML forcement strict (meme si on con- 
90k des cadres) ! 

La version 1.1 date deja : elle fut publiee le 31 mai 2001, soit a peine 16 mois apres la 
publication initiale de la version 1.0. Fait plus marquant encore : la derniere revision 
de XHTML 1.0 date du l er aout 2002, elle est done plus recente que XHTML... 

Les differences avec XHTML 1.0, qui est de loin la variante la plus utilisee ces der- 
nieres annees, sont tres minimes, meme pour une sous-version : l'attribut universel 
1 ang a ete remplace par xml : 1 ang a des fins de compatibilite avec la modularisation en 
cours de XHTML, et une serie d'elements dits « ruby » a ete ajoutee, qui permet de 
fournir des petits blocs de texte dans la marge, annotant le corps de texte principal. 

Le gros du travail sur XHTML se concentre aujourd'hui sur XHTML 2.0, mais il 
s'agit la d'un des nombreux symptomes d'un malaise dans le W3C. En effet, 
l'immense majorite des tenors du Web ont vivement critique cette specification, et 
estiment, pour resumer, que leurs auteurs se fourvoient. 

Indiquons simplement quelle est enorme, divisee en pas moins de 26 modules (la 
tendance au W3C etant a la modularisation ces dernieres annees), certains etant 
minuscules (attributs noyau), d'autres enormes (XForms). 

Les developpeurs web et leurs specialistes ont le sentiment que le comite n'a jamais 
eu a rediger veritablement un site web, et travaille dans sa tour d'ivoire pour produire 
une recommandation que personne n'utilisera jamais... 

Le balisage semantique 

C'est un concept tres simple : il s'agit d'utiliser une balise pour son sens et non pas 
pour son aspect par defaut. 

Encore aujourd'hui, vous trouverez nombre de developpeurs web qui vous diront que 
« hi, c'est pour ecrire en gros », ou que « blockquote sert a decaler vers la droite ». 
Ce genre de perception remonte aux premiers navigateurs, vers 1994. Autant dire, a 
l'echelle du Web, que 9a remonte au Jurassique. 

Laspect par defaut d'une balise est sans aucune importance. Je dis bien : aucune. 
D'ailleurs, il n'existe aucun standard pour ces aspects par defaut (juste une suggestion 
en annexe D de la recommandation CSS 2.1). Vous ne trouverez pas un seul docu- 
ment formel disant a quoi doit ressembler une balise de titre, ni meme strong ou em. 
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Bien sur, on a longtemps eu des balises dediees a l'aspect, par exemple font, b, i , u et s. 
Depuis HTML 4.01 (depuis 7 ans), seules les balises b et i sont encore autorisees, en 
raison de certains usages frequents qui restent plus simples, et plus propres finalement, 
que de coller un <span class="bold">...</span> a la place. 

II est temps d'apprendre le veritable sens de ces balises. Ce faisant, vous decouvrirez 
certaines balises et attributs dont vous n'aviez jamais entendu parler. Par exemple, 
connaissez-vous les balises abbr, acronym, caption, cite, del, fieldset, ins, kbd, 
label, legend, q, samp, tbody, tfoot, th, thead et var ?Je suis sur qu'au moins cer- 
taines ne vous disent absolument rien. Et que dire des attributs accesskey, axis, 
dateti me, di r, for, 1 ang, 1 ongdesc, scope et summary ? Tout cela est pourtant lie a la 
semantique et a l'accessibilite. 

Ce nest vraiment pas difficile de changer votre facon d'ecrire du HTML. Com- 
mencez par aller decouvrir les balises et attachez-vous a bien comprendre leur sens et 
leurs contextes autorises d'utilisation. Lisez bien toute la description de la balise et de 
ses attributs. Fuyez toute balise et tout attribut deprecies. La recommandation W3C 
est la pour 9a, elle est claire, et HTML 4.01 dispose meme d'une version francaise de 
bonne qualite (voir a la fin de cette annexe). 



Les balises XHTML 1 Strict par categoric 

Cette section liste l'ensemble des balises autorisees en HTML 4.01 et done en 
XHTML 1 (1.0/1.1, a l'exception du module Ruby de XHTML 1.1, trop peu 
implements, et des variantes Transitional et Loose de 1.0). Les balises depreciees 
sont rapidement listees, dans une categorie a part. 

Dans les descriptions, vous trouverez une explication courte du sens et du contexte 
d'utilisation eventuel pour la balise, ainsi que quelques remarques, mises en garde, et 
surtout invitations a aller explorer certains attributs trop souvent ignores ou mal 
employes. 

II ne s'agit pas de vous apprendre le HTML, pas plus que l'annexe 2 n'a pour ambi- 
tion de vous apprendre CSS. II y a d'excellents livres et sites pour cela ; vous en trou- 
verez quelques-uns dans les sections Pour aller plus loin... de ces annexes. II s'agit 
plutot ici de vous rappeler les fondamentaux, et de vous ouvrir les yeux sur le reste. 

Balises structurelles 

Les balises structurelles sont celles qui decrivent la structure du document : en-tetes, 
corps, regroupement d'elements en ligne ou de type bloc, tableaux... 
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Tableau A-1 Balises structurelles de XHTML 1 





body 


Corps du document. Ne peut contenir que des elements de type bloc, scri pt, i ns ou del . 
Les attributs background, text, link, vl ink et alink ont ete deprecies en faveurdes CSS. 


col 


Decrit le format d'une colonne de tableau. Presente dans tabl e ou col g roup. 


colgroup 


Alternative de description des formats d'un groupe de colonnes. Presente dans tabl e. 


div 


Conteneur de type bloc utilise pour grouper d'autres elements a des fins de CSS ou de script. 
Ne sombrez pas inutilement toutefois dans la divitis (http://fr.wikipedia.org/Divitis) ! 


head 


En-tetes du document : titre, metadonnees, liens vers des feuilles de styles, scripts et documents connexes. 


html 


[.'element racine de tout document (X)HTML. Pour etre impeccable, on renseigne ses attributs xml ns 
et xml : 1 ang. comme indique dans la section 3.1 .1 de la recommandation pour XHTML 1 .0. 


script 


Permet de charger un script separe (usage correct, dans le cadre de head) ou de definir un script 
interne. Ce dernier usage lui vaut sa place ici, mais il va a I'encontre des principes de \' unobstrusive 
JavaScript, decrits au chapitre 2. Voir egalement le tableau A-3. 


span 


Conteneur servant a regrouper des elements de type inline a des fins de CSS ou de script. 


table 


Tableau de donnees. Ne jamais utiliser pour obtenir une mise en page ! Connaissez-vous son attribut 
summary ? 


tbody 


Conteneur de tout ou partie des lignes du corps d'un tableau, present dans tabl e apres d'eventuels 
thead et tfoot. Oubliez les tr directement dans table, ce n'est pas soigne ! Lorsqu'un tableau 
contient plusieurs sous-sections logiques, il est bon de consacrer un tbody a chacune. 


td 


Cellule de tableau contenant une donnee (Table Data). Les attributs abbr, headers et scope font 
des merveilles pour I'accessibilite a I'intention des logiciels de lecture d'ecran ou des personnes 
souffrant d'un handicap cognitif. 


tf oot Pied de tableau. Presente dans tabl e apres un eventuel thead, mais avant tbody. Censee etre repetee 
en bas de chaque portion visible du tableau quand celui-ci est imprime sur plusieurs pages, par exemple. 


th 


Cellule de tableau contenant un titre de ligne ou de colonne (7ab/e Heading). 
Meme remarque que pour td. 


thead 


En-tete de tableau. Presente dans tabl e comme premier element fils (exception faite de capti on). 
Censee etre repetee en haut de chaque portion visible du tableau quand celui-ci est imprime sur plu- 
sieurs pages, par exemple. 


tr 


Ligne de cellules dans une portion de tableau (Table Row). Peut contenir des elements th ou td. 



Balises semantiques 

Les balises semantiques forment la plus grande categorie, pour la simple raison que 
HTML est concu pour indiquer au mieux la signification des portions de texte qui 
forment son contenu. Si ce tableau ne vous fait pas decouvrir un seul element, cha- 
peau bas ! 
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Tableau A-2 Balises semantiques de XHTML 1 





abbr 


Indique une abreviation. Si on cherche I'exactitude, une abreviation est soit la version raccourcie d'un 
mot (par exemple « Mass. » pour « Massachussets »), soit une serie d'initiales n'etant pas concue 
pour etre prononcee, mais plutot pour etre epelee (WWW, URI, HTTP, SNCF...). 


acronym 


Indique un acronyme, c'est-a-dire une serie d'initiales concue pour etre prononcee (Wysiwyg, Radar, 
Adullact...). 


blockquote Bloc de citation, approprie pour une citation longue. L'attribut cite permet de foumir I'URI de la 
source. Voiraussi q. 


caption 


Titre d'un tableau, preferable de loin a une premiere tr dans thead avec un th dote d'un eventuel 
attribut col span. Element fils immediat de tab! e. Generalement affiche par defaut au-dessus du 
tableau (reglable par CSS), centre sur la largeur de celui-ci. 


cite 


Reference a une source externe (citation au sens de « citer ses sources »). Voir aussi bl ockquote et q. 


code 


Fragment de code informatique (dans un langage quelconque). Voir aussi kbd, samp et var. 


dd 


Corps d'une definition associee au dernier terme (dt) la precedant dans une liste de definition (dl). 
Un meme terme peut avoir plusieurs definitions successives, ou plusieurs fragments de definition, sous 
forme de plusieurs elements dd. 


del 


Indique une excision (retrait) de contenu dans le cadre d'une revision du document. Un des elements les 
plus sous-utilises de HTML. L'attribut dateti me permet d'horodater la modification, et l'attribut ci te 
peut referencer I'URI d'un document detaillant ses motivations. L'affichage par defaut est explicite, en 
laissant son contenu visible mais barre. Voir aussi ins. 


dfn 


La balise la plus mal specifiee de tout HTML. Censee encadrer la premiere occurrence d'un terme, a 
valeur de definition. Mais la recommandation n'explique pas comment isoler le mot dans sa definition... 


dl 


Liste de definitions. Contient une serie de termes (dt) suivis d'une ou plusieurs definitions (dd). La 
semantique autorisee est un peu plus large que les definitions a proprement parler, de sorte qu'on peut 
s'en servir pour un glossaire, un menu, voire meme des dialogues dans un scenario. 


dt 


Terme a definir, dans le cadre d'une liste dl . Suivie d'une ou plusieurs definitions dd. 


em Emphase simple, plus legere que strong. Dans un texte, correspond souvent a I'effet produit par la 
mise en italique. 


hl...h6 


Titres a niveaux hierarchiques, hi etant le premier niveau (le plus haut), h6 le dernier (on en a 
rarement besoin, ou alors votre page est un immense pave). Les moteurs de recherche leur accordent 
en general un « poids » proportionnel. 


img 


Insere une image. Devrait toujours avoir un attribut al t, vide uniquement si I'image est purement 
decorative (pour ne pas gener la representation textuelle). Les attributs "longdesc et title ont 
aussi un role a jouer dans I'accessibilite. 


ins 


Symetrique a del : indique un ajout de contenu dans le cadre d'une revision du document. Un des 
elements les plus sous-utilises de HTML. L'attribut dateti me permet d'horodater la modification, et 
l'attribut ci te peut referencer I'URI d'un document detaillant ses motivations. 


kbd 


Indique un texte saisi par I'utilisateur dans le cadre d'une manipulation. Voir aussi samp. 
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Tableau A-2 Balises semantiques de XHTML 1 (suite) 





label 


Indique un libelle de champ dans un formulaire. Figure aussi au tableau A-6 pour I'aspect formulaire. 
Ses attributs access key et for sont primordiaux, car certains types de champs ne peuvent definir 
leur propre accesskey. Attention : for reference un i d, pas un name ! Peut se presenter sous 
deux formes, mais on prefere qu'il n'encadre que le libelle lui-meme, et pas le champ : cela ouvre 
davantage de possibility tant pour les CSS que pour les scripts. 


li 


Element de liste (ul ou ol). Pensez a bien lesfermer en XHTML ! 


ol 


Liste ordonnee (sequence croissante de numeros ou lettres). Tous les attributs de sequencement 
(start, val ue) et de format (type, compact) ont ete deprecies au profit des CSS, plus puissantes 
d'ailleurs. 


P 


Definit un paragraphe, ce qui est en soi un type semantique de contenu. Pensez a bien les fermer en 
XHTML ! 


q 


Citation courte. L'attribut cite permet de referencer I'URI de la source. Voir aussi blockquote. 


samp 


Exemple d'un affichage ou d'une sortie imprimee par un programme (affichage en console, etc.). 
Voir aussi kbd. 


strong 


Emphase forte, plus appuyee que em. Dans un texte, correspond a I'effet produit par la mise en gras. 


sub 


Texte en indice, generalement dans une formule {subscript). 


sup 


Texte en exposant, generalement dans une formule ou pour une note de bas de page {superscript). 


title 


Titre de la page, presente dans head. Contient souvent au moins I'equivalent de I'eventuel element 
hi present dans le corps de la page, mais avec plus de contexte. Son contenu constitue souvent le titre 
de la fenetre de I'onglet du navigateur. 


ul 


Liste non ordonnee (a puces). Les attributs type et compact ont ete deprecies au profit des CSS, 
plus puissantes d'ailleurs. Ideal pour representer semantiquement un menu, les CSS pouvant le 
transformer a volonte... 


var 


Indique une variable ou un argument de programme. Voir aussi code et kbd. 



Balises de liaison 

II s'agit de balises etablissant des liens vers d'autres ressources ou documents. 



Tableau A-3 Balises de liaison de XHTML 1 



Balise 

a 



base 



Description 

La balise de lien par excellence. Attention : son attribut target est deprecie depuis deja 7 ans, et 
l'attribut name n'est plus autorise en XHTML : utilisez plutot un i d sur I'element vers lequel vous sou 
haitez definir une URL de fragment. Cote semantique, I'utilisation de l'attribut h ref 1 ang est en 
pleine explosion (notamment grace aux selecteurs CSS 2), l'attribut rel commence a faire surface 
grace a des fonctionnalites proposees par Google, et l'attribut type peut etre utile. 



Modifie I'URL de base pour les URL relatives au sein du document. Presente dans head. Son attribut 
target permet, le cas echeant, de faire que tous les liens s'ouvrent dans un autre cadre que le cadre 
courant. 
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Tableau A-3 Balises de liaison de XHTML 1 (suite) 



Balise Description 

1 i nk Lien vers une ressource externe. Principal moyen de chargement de CSS. Ses attributs type et href 

sont incontournables, mais I'attribut rel est aussi tres utile, tant pour proposer plusieurs feuilles de 
styles alternatives que pour definir des hierarchies ou reseaux de pages. Connaissez-vous ses valeurs 
start, next, prev, contents, chapter ou encore section ? II yen a bien d'autres : http:// 
www.w3.org/TR/html401/types. html#type-links. Enfin, I'attribut hreflang existe ici aussi, 
ce qui est semantiquement interessant. 



scri pt Chargement de scripts externes depuis le head. Seule utilisation correcte, contrairement aux frag- 

ments de scripts integres au contenu de la page (a I'exception des retours Ajax, comme cela est mon- 
tre dans plusieurs chapitres). Attention : I'attribut T anguage est deprecie depuis 7 ans, au profit de 
I'attribut type, qui vautdonc le plus souvent text/ javascript. 



Balises de metadonnees 



Tableau A-4 Balises de metadonnees de XHTML 1 



Balise Description 


address 


Encadre les informations de contact des responsables de la page (liens mai 1 to : , paragraphes avec 
une adresse postale.etc). Extremement peu utilise. A tort ? 


bdo 


Court-circuite I'algorithme determinant le sens du texte (gauche a droite ou droite a gauche) sur la 
base des attributs di r des elements contenant celui-ci {Bi-Directional Override). Son attribut di r 
redefinit la direction par defaut de son contenu textuel, tandis que son attribut 1 ang (ou xml : 1 ang 
en XHTML 1.1) permetd'en changer aussi la langue indiquee. J'avoue ne pas percevoir I'interet par 
rapport a span, qui n'a pas plus de valeur semantique et peutfaire la meme chose... 


meta 


L'element de metadonnees par excellence. Figure dans head, autant de fois que necessaire. Peut aussi 
bien remplacer ou completer les en-tetes de reponse HTTP (attribut http-equi v, tres utilise notam- 
ment pour preciser lejeu de caracteres grace a Content -Type) que rajouterdes metadonnees quel- 
conques (attribut name). La valeur est dans I'attribut content. On I'utilise notamment pour remplir 
les pages de metadonnees appartenant a des ontologies (vocabulaires) reconnues, comme le Dublin 
Core (http://dublincore.org/documents/dcmi-terms/). Connaissez-vous son attribut scheme, 
plutot avance ? 



Balises de presentation 



Balise 

area 



Tableau A-5 Balises de presentation de XHTML 1 

Description 

Definit une zone cliquable sur une image a I'aide de ses attributs shape, coords et href. Ne negli- 
gez surtout pas ses attributs alt, tabi ndex et access key pour I'accessibilite ! Voir aussi map. 

Mise en gras. Juge plus soigne qu'un <span class="bold">...</span> en I'absence de conno- 



tation semantique. 
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Tableau A-5 Balises de presentation de XHTML 1 (suite) 





big 


Utilisation de la taille de texte superieure. J'avoue ne pas en voir I'utilite par rapport aux CSS. 
Voiraussi small. 


br 


Fin de ligne, ou retour chariot si vous preferez (line break). Force le passage a la ligne dans un texte. 


frame 


Definition d'un cadre dans un ensemble de cadres. Je rappelle que les cadres sont a eviter le plus 
possible, car ils nuisent a I'accessibilite et a la navigation. Si vous en utilisez neanmoins, assurez-vous 
de bien definir I'attribut 1 ongdesc. 


frameset 


Definition d'un ensemble de cadres, qui precise notamment la disposition (horizontale ou verticale). 


hr 


Ligne horizontale de separation {horizontal rule). Tous ses attributs specifiques sont deprecies au 
profit des CSS. 


i 


Mise en italique. Juge plus soigne qu'un <span class="italic">...</span> en I'absencede 
connotation semantique. 


map 


Conteneur descriptif pour les zones cliquables (a rea) d'une image (i mg ; je vous deconseille d'utiliser 
des zones cliquables sur un i nput type="image" ou un object, meme si c'est autorise). Son 
attribut name est reference par I'attribut usemap de I'image. Attention a bien renseigner les attributs 
d'accessibilite des balises area. 


noframes 


Contenu alternatif pour un navigateur ne prenant pas en charge les cadres. Principalement utile pour 
les moteurs de recherche, qui n'iront pas dans les cadres. En revanche, tous les navigateurs repandus, 
meme textuels (w3m a supplante lynx), gerent aujourd'hui les cadres. 


object 


Balise fourre-tout pour objets ne disposant pas d'une balise dediee : applets Java (la balise appl et 
est depreciee depuis 7 ans), animations Flash ou Shockwave, et sur MSIE n'importe quel controle 
ActiveX (par exemple Windows Update). Essentiellement utilise pour fournir des animations et des lec- 
teurs audio ou video au sein de la page. 


param 


A I'interieur d'un object, les elements param permettentde definir des parametres nommes pour 
I'objet. 


pre 


Texte preformate : il s'agit generalement de I'equivalent d'un <div style="white-space: 
p re ; ">. On y laisse done normalement les espacements tels quels, ainsi que les retours chariot : les 
lignes ne sont pas decoupees pour satisfaire une contrainte de largeur. Tres utilisee pour presenter du 
code source ou tout autre contenu textuel de nature informatique. La police de caracteres par defaut 
est a chasse fixe (par exemple Cou ri e r New). 


small 


Utilisation de la taille de texte inferieure. J'avoue ne pas en voir I'utilite par rapport aux CSS. 
Voir aussi bi g. 


style 


Permet de fournir un fragment de script dans le corps du document. Cette utilisation est a proscrire, car 
elle est contraire a la separation du contenu et de I'aspect. Ne pas confondre avec I'attribut styl e de 
la plupart des elements, qui est parfois justifie dans certains contextes tres delimiter Voir aussi link 
dans le tableau A-3. 


tt 


Utilisation d'une police a chasse fixe {teletype). A n'utiliser que si vous estimez que votre contenu 
n'est pas couvert semantiquement par code, kbd, samp ou var. 
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Balises de formulaires et d'interaction 

La plupart des champs de formulaires et boutons disposent d'attributs relatifs a 
l'ergonomie et l'accessibilite, qu'il vous faut bien connaitre. Citons notamment 
accesskey (qu'il est preferable de laisser toutefois sur un label associe), disabled, 
readonly et tabindex. 
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Balise Description 


button 


Variante peu utilisee (car souvent visuellement... bizarre) de <input type="button"... />. La 
balise button est en fait un conteneur, dans lequel on peut placer tout type de contenu en ligne, a 
I'exception des balises de formulaire et de a. Elle est done censee permettre un contenu de bouton 
plus riche que i nput. Personnellement, je ne m'en sers jamais. 


fieldset 


Groupe logique de champs dans un formulaire, dote le plus souvent d'un titre grace a legend. 
Encore trap peu utilise et pourtant tres utile pour des formulaires un peu voire tres riches en contenu. 
Vous verrez un exemple plus loin dans cette annexe. 


form Formulaire. Grammaticalement, il n'est pas possible de placer un champ de formulaire hors d'une 
balise form, quitte a ce qu'elle soit inutile par ailleurs. Les principaux attributs sont method et 
action. Si vous avez des champs de type fichier, I'attribut enctype est indispensable. Quanta 
name, il est deprecie depuis XHTML 1 .0, au profit de i d. 

Par ailleurs, la DTD exige que form ne contienne que des elements de type bloc ou scri pt, hormis 
form bien sur. Consequence : vos champs de formulaire doivent apparaitre dans des conteneurs de 
type bloc, souvent p ou f i el dset. 


input La principale balise de description de champ. Son attribut type, quoique dote d'une valeur par defaut 
(text), devrait toujours etre precise, ainsi que name (sauf pour le type submit, a moins qu'il yen 
ait plusieurs) et tabi ndex. Pensez aussi, quand c'est pertinent, aux attributs accept, checked, 
disabled, maxlength, readonly et value. Quanta size, preferez utiliser une regie CSS. 


label 


Libelle d'un champ de formulaire. Signale au tableau A-2 pour son role semantique, ce pour quoi je 
vous encourage bien entendu a fournir un libelle pour tout champ n'en ayant pas deja un (done, tous 
sauf les boutons). Pensez aussi a associer explicitement le 1 abel a son champ a I'aide d'un i d sur le 
champ et du for correspondant sur le label, select nedisposant pas d'attribut accesskey, 
label permetde lui en associer un ; d'une maniere generate, mettez les accesskey sur les libelles 
quand ils existent. 


1 egend Titre d'un groupe logique de champs et libelles dans un formulaire. Generalement le premier element 
fils d'un fieldset. 


optgroup 


Dans un sel ect, definit un groupe d'options possibles, ce qui est pratique quand il y en a beaucoup. 
On utilise I'attribut 1 abel pour nommer le groupe, et on peut meme desactiver juste ce groupe avec 
disabled. On ne peut pas imbriquer les elements optgroup : la hierarchie n'a qu'un niveau. Sui- 
vant le navigateur, I'aspect par defaut varie mais un style peut bien entendu etre applique. 


option 


Option selectionnable dans un sel ect. Peut figurer directement sous le select ou dans un 
optgroup. L'attribut selected parle de lui-meme... Desactivable individuellement avec I'attribut 
di sabl ed. II est preferable de toujours preciser I'attribut val ue, le comportement normatif (utilisa- 
tion du contenu textuel comme valeur par defaut) n'etant pas respecte au niveau DOM par MSIE. 
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Tableau A-6 Balises de formulaire et d'interaction de XHTML 1 (suite) 
Description 




Balises depreciees 

Voila deja 7 ans (HTML 4.01, decembre 1999) que les balises depreciees n'ont plus 
droit de cite. Et pourtant, on les rencontre encore souvent... helas ! Evitez done de 
vous attirer les foudres des navigateurs modernes et de vos pairs. 

Tableau A-7 Balises depreciees de XHTML 1 



Balise Description 


applet Permettait I'inclusion d'une applet Java. Remplacee par object. 


basefont Permettait de preciser les valeurs par defaut pour les attributs des balises font. 


center Centrait tout son contenu. Remplacee par les propriet.es CSS text-align et margin (valeurspe- 
ciale auto). Attention : I'attribut align est egalement deprecie pour tous les elements ! 


di r 


Devait permettre de creer des listes a colonnes multiples, comme un annuaire {directory). N'a jamais 
ete vraiment prise en charge. Voir aussi menu. 


font 


Remplacee par les CSS, bien plus puissantes d'ailleurs. 


i frame 


Sorte de cadre en ligne, qui etait abondamment utilise (et, helas, Test encore) pour realiser des echan- 
ges en arriere-plan avec le serveur (facon Ajax), ce qui etait au moins autant utilise a des fins legitimes 
qu'a d'autres bien plus dangereuses. Pas veritablement depreciee, mais qui ne figurait deja plus que 
dans la variante Loose de HTML 4.01, la moins soignee. 


isindex 


Tres vieille variante de champ de saisie textuelle a ligne unique. 


menu 


Devait permettre de creer des listes a colonne unique. N'a jamais ete vraiment prise en charge. Voir 
aussi di r. 


s 


Synonyme de stri ke. 
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Tableau A-7 Balises depreciees de XHTML 1 (suite) 



Balise 




strike 


Barrait un contenu. Remplacee par del quand la semantique convient, par la propriete CSS 
text-decoration sinon. 


u 


Soulignait le texte. Remplacee par la propriete CSS text-decoration. 



Attributs incontournables 

Pour finir, voici quelques attributs incontournables, dits « noyau », identifiables dans 
la DTD sous l'entite %coreattrs. Tous les elements en disposent. 

Tableau A-8 Attributs incontournables de XHTML 1 



Attribut Description 


class 


Contient une ou plusieurs classe(s) CSS. Le saviez-vous ? II est tout a fait possible de fournir plusieurs 
classes a un meme element, qui cumule alors les applications de regies. Cela est tres pratique, et evite 
d'avoir a dupliquer nombre de regies dans la feuille de styles. Les classes sont separees dans la valeur 
de I'attribut par des espaces. 


di r 


Indique la direction d'ecriture du contenu (1 1 r ou rtl , pour gauche a droite ou droite a gauche). Voir 
aussi lang. 


id 


De loin I'attribut le plus utilise, avant meme cl ass, dans un document soigne et semantique ! 
Contient un identifiant, unique a travers tout le document, grace auquel tant les CSS que les scripts 
pourront referencer I'element en un din d'ceil. 

Le saviez-vous ? Un ID valide doit commencer par une lettre non accentuee et peut ensuite contenir 
des chiffres arabes et des tirets bas (_), mais aussi des tirets (-), des points ( . ) et des deux-points ( : ) ! 
Ces deux dernieres possibility peuvent toutefois poser un probleme dans la syntaxe des regies CSS, 
qui ont alors besoin d'encadrer les ID par des apostrophes ( ' ) pour s'y retrouver. 


lang 


Languedu contenu. Contient un code de langue de la RFC 1766, parexemple fr-FR. Voir aussi di r. 


style 


Style en ligne applique a I'element. Generalement mal vu, car enfreint la separation entre contenu et 
aspect. Parfois necessaire cependant, en particulier pour masquer initialement un contenu avec 
display: none dans le cadre des bibliotheques Prototype et done script.aculo.us (voir chapitres 4, 
6 et 7). 


title 


Fournit une information descriptive ou complementaire sur I'element. L'information est generalement 
affichee dans une infobulle si le curseur de la souris reste un instant sur I'element. Fondamental pour 
des balises comme abbr et acronym, il est aussi utile pour preciser la destination d'un lien ou nom- 
mer les feuilles de styles alternatives d'un document. II a enfin de nombreux usages dans le cadre de 
I'accessibilite. 
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Besoins frequents, solutions concretes 

A present que nous avons fait le tour des balises disponibles en XHTML 1 Strict, il 
est temps d'en illustrer l'utilisation la plus correcte possible dans le cadre de certains 
besoins recurrents. 

Un formulaire complexe mais impeccable 

Prenons un formulaire sur un site communautaire, servant a editer des informations 
de profil. Les concepteurs du site ont decide que la totalite des informations etaient 
presentees dans un meme formulaire. Ces informations sont reparties en 5 groupes 
logiques : 

1 connexion (identifiant, mot de passe) ; 

2 identite (civilite, nom, prenom, surnom) ; 

3 details personnels (adresse courriel, identifiants de messagerie instantanee, site 
personnel, petit descriptif en texte libre, photo) ; 

4 centres d'interets (serie de cases a cocher) ; 

5 conditions de fonctionnement (CGU, divulgation d'informations a des partenai- 
res, type d'abonnement a la lettre de diffusion du site). 

Le formulaire doit etre le plus lisible possible, pour tout type de public. On veillera 
done a eviter une mise en page tableau, pour lui preferer l'emploi de CSS adaptables 
au type de navigateur (petit ou grand ecran, graphique ou texte, lecteur d'ecran ou 
plage braille, etc.) et aux besoins de l'utilisateur (navigation intelligente a l'aide de la 
touche Tab et de touches de raccourci, libelles associes aux champs, etc.). 

La photo peut etre telechargee a l'aide d'un champ de type fichier. Ce champ doit 
filtrer les possibilites pour ne retenir que les formats d'image pris en charge par le 
site, pour lequel on a decide de se limiter a JPEG, PNG et GIF. Une limite de taille 
de fichier sera geree cote serveur, et l'image y sera de toutes facons redimensionnee. 

Evidemment, toute validation ou complement fonctionnel JavaScript sera realise de 
facon non intrusive, depuis un script separe. Aucun gestionnaire d'evenement ne sera 
done present dans le code, et un envoi sans activation JavaScript sera possible (avec 
un champ de type submit ou image). 

Void le code HTML repondant a ce besoin (vous le retrouverez dans l'archive de 
codes source pour ce livre, disponible sur le site des editions Eyrolles). 

Listing A-l Notre premiere section, dediee aux informations de connexion 

<form id="profile" enctype="multi part/form-data" 

*» method="post" action="/profile/update"> 
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<fieldset id="credentia1s"> 
<legend>Connexi on</l egend> 

<P> 

<label for="edtReqLogin" accesskey="E">Identifiant</labe"l> 
<input type="text" id="edtReqLogin" name=""login" 
* va"lue="tdd" tabindex="l" /> 
</p> 
<P> 

<label for="edtPassword" accesskey="A">Nouveau mot de passe 
</labe"l> 

<input type="password" id="edtPassword" name="password" 
*» tabindex="2" /> 
</p> 
<P> 

<label for="edtConfi rm" accesskey="C">Confi rmation</labe"l> 
<input type="password" id="edtConfi rm" name="confi rm" 
*• tabindex="3" /> 
</p> 
</fie1dset> 

• Notez l'attribut enctype du formulaire form, en prevision du champ de telechar- 
gement de fichier du listing A-3. 

• Chaque champ fait l'objet d'une valeur a progression logique pour tabi ndex. 

• Le mot de passe etant saisi sans confirmation visuelle, on ajoute un champ de 
confirmation pour detecter une saisie erronee. 

• Tous les libelles definissent une accesskey pour leur champ. 
Voyons a present la deuxieme section du formulaire. 

Listing A-2 Informations sur I'identite de I'utilisateur 

<fieldset id="identity"> 

<1 egend>Identi te</l egend> 

<P> 

<label for="cbxTitle" accesskey="V">Vous etes</label> 
<span id="basicldentity"> 

<select id="cbxTitle" name="title" size="l" tabindex="4"> 
<option value="l" selected="selected">M.</option> 
<opti on val ue="2 ">M1 1 e</opti on> 
<option value="3">Mme</option> 
</select> 

<input type="text" id="edtReqFi rstName" name="f i rstName" 

accesskey="P" va1ue="Christophe" tabindex="5" /> 

<input type="text" id="edtReqFi rstName" name="lastName" 

•» accesskey="N" value="Porteneuve" tabindex="6" /> 

</span> 

</p> 
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<P> 

<label for="edtNickname" accesskey="S">Surnom</labe"l> 
<input type="text" id="edtNickname" name="nickname" 
•» va"lue="TDD" tabindex="7" /> 

</p> 
</fie1dset> 

• Afin de gagner en place et en ergonomie, nous placons les champs composant 
l'identite globale (civilite, prenom, nom) sur une meme ligne. Pressentant un 
besoin de groupement pour la CSS, on encadre les trois par un span. 

• Le sel ect, en si ze 1, est une liste deroulante. L'element retenu par defaut est mar- 
que par un attribut bascule sel ected. Notez sa valeur, seule autorisee par la DTD. 

La section sur les details personnels est de loin la plus riche. 
Listing A-3 Details personnels 

<fieldset id="details"> 

<1 egend>Detai 1 s personnel s</l egend> 

<P> 

<label for="edtReqEmai"l" accesskey="0">Courrie"l</labe"l> 
<input type="text" id="edtReqEmai"l" name="emai"l" 
•» va"lue="tdd@example.com" tabindex="8" /> 
</p> 
<P> 

<labe"lxabbr title="Instant Messaging, 

Messageri e i nstantanee">IM</abbrx/l abel > 
<span id="imIDs"> 

<label for="edtMSN" accesskey="l">MSN</label> 
<input type="text" id="edtMSN" name="im[msn] " 

va"lue="tdd@example. com" tabindex="9" title="Alt+l" /> 
<label for="edtICQ" accesskey="2">ICQ</labe"l> 
<input type="text" id="edtICQ" name="im[icq]" 

•» va"lue="123456789" tabindex="10" title="A"lt+2" /> 
<Tabe1 for="edtJabber" accesskey="3">Jabber</labe"l> 
<input type="text" id="edtJabber" name="im [jabber] " 

•» va"lue="tdd@example. com" tabindex="ll" title="A"lt+3" /> 
</span> 
</p> 
<P> 

<label for="edtHomePage" accesskey="T">Site personne"l</labe"l> 
<input type="text" id="edtHomePage" name="homePage" 

•» va1ue="http://www. example. com" tabindex="12" /> 
</p> 
<p id="detailsContainer"> 

<label for="memDetails" accesskey="D">Details</labe"l> 
<textarea id="memDetails" name="details" cols="40" rows="3" 
tabi ndex="13"x/textarea> 
</p> 



Bien baliser votre contenu : XHTML semantique 

Annexe A 



<P> 

<label for="fil Photo" accesskey="H">Photo</label> 
<span id="photo"> 

<input type="file" id="filPhoto" name="photo" tabindex="14" 

*» accept=" i mage/ j peg, image/gif ,image/png" /> 
<span class="note">(JPEG, PNC ou GIF, 150ko maximum)</span> 
</span> 

</p> 
</fieldset> 

• Notez l'explication de l'abreviation IM, a l'aide d'abbr et de son attribut title. 
La CSS incitera l'utilisateur a amener sa souris sur le terme et a l'y laisser un ins- 
tant pour obtenir l'explication. 

• La aussi, quelques elements sur la meme ligne sont regroupes dans un span en 
prevision des CSS. 

• Remarquez comme les champs de saisie d'identifiants IM precisent leur touche 
de raccourci avec l'attribut title : le caractere actif ne figurant pas dans leur 
liberie, il ne pourra pas etre mis en evidence par un script. II faut tenter de fournir 
l'information autrement, et title produit generalement une infobulle. 

• Remarquez que textarea est un element non vide : il faut utiliser une balise fer- 
mante. Les suggestions de taille proposees par les attributs col s et rows seront 
remplacees par celles de la CSS quand celle-ci est active. 

• Exemple de champ de type f i 1 e. II n'est pas possible de specifier une valeur dans 
le HTML. Notez l'attribut accept. 

La section 4, celle des centres d'interet, est plus simple. On suppose que la liste de 
ceux-ci est dynamiquement extraite de la base de donnees, ce qui empeche l'utilisation 
de touches de raccourci, car on ne connait pas forcement tous les liberies affiches. 

Listing A-4 Centres d'interets 

<fieldset id="interests"> 

<legend>Centres d'interets</legend> 
<ul> 

<li> 

<input type="checkbox" id="chklnterests_l" 

name="interests" value="l" /> 
<label for="chkInterests_l">3eux video</label> 
</li> 
<li> 

<input type="checkbox" id="chklnterests_2" 

name="interests" value="2" /> 
<label for="chkInterests_2">Mode</label> 
</li> 
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<li> 

<input type="checkbox" id="chklnterests_3" 

name="interests" value="3" /> 
<label for="chkInterests_3">Gadgets</label> 
</"li> 
</ul> 
</fieldset> 

Ici, une liste non ordonnee est semantiquement parfaite pour representer cette liste 
de choix individuels. La CSS fera disparaitre les puces et ajustera les positions. Pour 
faciliter le traitement cote serveur, on donne a tous les champs le meme nom, mais 
une valeur differente (ici probablement FID de l'information dans la base), utilisee 
pour composer l'id HTML et ainsi associer le libelle a la case. Cette association 
permet a l'utilisateur de basculer l'etat de la case en cliquant sur le libelle lui-meme, 
ce qui est plus accessible et similaire aux interfaces classiques. Cote serveur, on 
recevra le champ une fois par case cochee, avec la bonne valeur a chaque fois. 

Enfin, voici la derniere section, le bouton d'envoi et la cloture du formulaire. 



Listing A-5 Conditions de fonctionnement 

<fieldset id="account-behavior"> 

<legend>Conditions de fonctionnement</legend> 
<ul> 

<li> 

<input type="checkbox" id="chkCGU" name="cgu" 

val ue="yes"checked="checked" /> 
<label for="chkCCU" accesskey="U">J 'accepte les 
conditions generales d' utilisation .</label> 
</li> 
<li> 

<input type="checkbox" id="chkSpreadData" 
•» name="spreadData" value="yes" /> 
<label for="chkSpreadData" accesskey="3">3e consens a ce 
que mes informations personnelles soient divulguees a des partenaires. 
</label> 
</li> 
</ul> 

<h2>La <span lang="en">newsletter</span> du site</h2> 
<ul> 

<li> 

<input type="radio" id="rbtNoSub" name="newsletter" 

•» value="no" checked="checked" /> 
<label for="rbtNoSub" accesskey="R">3e ne desire pas la 
recevoi r.</label> 
</li> 



Bien baliser votre contenu : XHTML semantique 

Annexe A 



<li> 

<input type=" radio" id="rbtWeekly" 

•» name="newsletter" value="weekly" /> 
<label for="rbtWeekly" accesskey="B">Je desire la 
recevoi r hebdomadai rement .</label> 
</li> 
<li> 

<input type=" radio" id="rbtMonthly" 

•» name="newsletter" value="monthly" /> 
<label for="rbtMonthly" accesskey="L">Je desire la 
recevoir mensuellement.</label> 
</li> 
</ul> 
</fieldset> 

<p class="submit"xinput type="submit" id="btnSubmit" value="Mettre 
a jour mon profil" accesskey="M" title="Alt+M" /></p> 
</form> 

• Pour une case a cocher isolee, on precise la valeur afin d'eviter de dependre du 
navigateur pour la valeur par defaut (suivant les cas on obtient on, 1, yes...), ce qui 
compliquerait le test cote serveur. Tester simplement que le champ est present 
dans la requete ne serait pas forcement tres robuste. 

• Remarquez l'attribut bascule checked et sa seule valeur autorisee. 

• Notez la precision de la langue pour le terme « newsletter », qui permettra notam- 
ment aux lecteurs d'ecran de le prononcer correctement a l'intention des non- 
voyants ou malvoyants. La CSS pourrait meme basculer en italique de tels ele- 
ments, par exemple (selecteurs d'attribut CSS 2, ou de langue CSS 3). 

• Les boutons radio mutuellement exclusifs portent le meme nom, mais des valeurs 
differentes. Le champ n'est envoye qu'une fois, pour le bouton selectionne. 

• Le bouton d'envoi, champ de type submit, n'a pas de libelle externe : il precise 
done son accesskey et la rend consultable avec title. II est par ailleurs inutile de 
lui donner un attribut name, ce qui enverrait un champ au serveur alors qu'il n'y a 
pas plusieurs modes d'envoi parmi lesquels choisir... 

Le fichier HTML complet pese 5 Ko, et la CSS en ajoute 1,5, soit un total de 
6,5 Ko. Croyez-moi sur parole, l'equivalent en HTML des annees 1990 est beau- 
coup plus lourd, alors qu'il est aussi beaucoup plus rigide et incapable de s'adapter 
d'un mode de consultation a un autre. 

La figure A-l vous montre le resultat sans aucune feuille de styles. 
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Figure A-1 

Notre formulaire sans aucune 
mise en page 



Votre profil - Mozilla Firefox 
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♦ ■ 
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Nouveau inoL tit; pastel] 
Confirmation! 
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Surnom [tdd 
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Cuuriie] jtdd@c-KCimplc.com 
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Details 
Phntof 



J Q pf.g, P ng nu a F, 1 sn kfl maximum) 



Centres d'interets 

• f Jeux video 

• f Mfxtn 

• \~ GadgeLt; 



-Conditions de ionctionnement 

F J 'acceptelescmditionsgeneralesd' utilisation. 

\~ Je Luntsitti a l~g tjiit; [imsiiifuiJiititiu-nt>uei"Buii]iellKt>suitJiitdivu]yueeti a des uatlenaij^es. 

Lii newsletter du site 

* F je ne desire pas la recevoir. 

* f" je desire la recevoir hebdomadairement. 

* f" J e desire la recevoir mensuellement. 



Mftrrra Bjflur mnn profil | 



Cela fait certes peur, mais ce n'est pas grave : le contenu de la page a du sens, beaucoup de 
sens. La figure A-2 montre le formulaire, avec une feuille de styles et Implication 
d'un petit script de decoration automatique de libelles, comme celui vu au chapitre 3 
dans la section Decoration automatique de labels : 

Quand je vous disais que les CSS font des miracles... 

II est par ailleurs possible d'y ajouter un script non intrusif de validation automatique 
de formulaire, comme vu au chapitre 3, dans la section Validation automatique defor- 
mulaires. Vous trouverez aussi en fin d'annexe, dans la section Pour aller plus loin..., 
FURL d'un article OpenWeb dedie a la conception de formulaires semantiques. 
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Figure A-2 

Le meme formulaire, mis en 
forme par CSS et un script 
complementaire 
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Un tableau de donnees a en-tetes groupes 

Prenons maintenant l'exemple d'un tableau de donnees. La balise table et ses 
collegues : thead, tbody, tfoot, tr, th et td, ne sont pas a eviter comme la peste ! 
Simplement, elles servent a decrire des tableaux de donnees, pas a realiser une mise 
en page aussi rigide (et lourde) qu'un parpaing. 

Supposons que nous souhaitions realiser un tableau representant en abscisse des pro- 
duits (classes par categories) et en ordonnee des modes de livraison, eux-memes 
declines par zone geographique de livraison. On aimerait que les en-tetes du tableau 
persistent au-dela d'un saut de page a l'impression. On aimerait aussi qu'il soient 
semantiques et un minimum accessibles aux utilisateurs de lecteurs d'ecran. 
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Void comment proceder... 

Listing A-6 Un tableau bien structure, semantique et accessible 

<table id="shipment" summary="Options de livraisons et leurs couts"> 
<caption>Couts de livraison par mode et par zone geographique 
</caption> 
<thead> 

<tr> 

<th rowspan="2" class="bodyHeading">Mode</th> 

<th colspan="3">T-shi rts</th> 

<th colspan="4">Cadgets</th> 
</tr> 
<tr> 

<th>l&ndash ; 10</th> 

<th>ll&ndash ; 50</th> 

<th>> 50</th> 

<th>< lkg</th> 

<th>l&ndash ; 5kg</th> 

<th>5&ndash ; 10kg</th> 

<th>> 10kg</th> 
</tr> 
</thead> 
<tbody> 

<trxth colspan="8" class="zone">Europe</thx/tr> 
<tr> 

<th>Col i Poste</th> 

<td>2€</td> 

<td>5€</td> 

<td>15€</td> 

<td>5€</td> 

<td>15€</td> 

<td>22€</td> 

<td>30€</td> 
</tr> 
<tr> 

<th>Col i ssi mo</th> 



</tr> 
</tbody> 
<tbody> 

<trxth colspan= 
Austral ie</thx/tr> 



'8" c1ass="zone">Amerique du Nord, Maghreb, 



</tbody> 
</table> 

• Notez l'attribut summary, qui resume le contenu de la table, et l'element fils 
caption, qui lui fournit un titre explicite. 
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• Les en-tetes sont, logiquement, dans thead. Les cellules qui y figurent ne four- 
nissent que des titres, ce sont done des th. 

• Les differents corps de donnees (ici un par zone geographique) sont des tbody. 
Chaque corps a ici un sous-titre dedie, realise avec une premiere ligne ne compor- 
tant qu'un th sur toute la largeur. 

• Chaque ligne demarre par un titre, done un th, puis n'a que des donnees, done 
des td. 

Le fichier HTML pese 2 Ko, la CSS, quoique bien aeree, ne pese que 610 octets. 
Void l'aspect du tableau, dote de cette feuille de styles minimaliste : 



Figure A-3 

Notre tableau avec 
un style leger 
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Si on souhaite rendre maximale l'accessibilite, en particulier a destination des lec- 
teurs d'ecran (non-voyants, malvoyants) et des personnes souffrant d'un handicap 
cognitif, les elements th et td disposent d'attributs abbr, headers et scope extreme- 
ment utiles. Vous pourrez en apprendre davantage sur cet aspect et les tableaux en 
general ici : http://pompage.net/pompe/autableau/. 



Un didacticiel technique 

Pour finir, penchons-nous sur les balises semantiques en ligne, e'est-a-dire concues 
pour indiquer le sens d'un fragment de texte. Nous allons prendre l'exemple d'une 
documentation technique qui, apres avoir reference quelques sources et cite un frag- 
ment pertinent de l'une d'elles, fournit aux lecteurs un morceau de code source et les 
guide a travers quelques manipulations clavier dans leur console. 
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Listing A-7 Une documentation au balisage hautement semantique 



<hl>Lister les libelles d'un document</hl> 

<p>Nous allons apprendre a lister les libelles d'un document HTML a 1'aide 
du DOM niveau 2 (noyau et HTML). On se reposera essentiellement sur 
<code>document.getElementsByTagName</code>. Cette methode, je cite, 
<q cite="http: //www. w3.org/TR/DOM- Level -2-Core/core. html #ID-A6C9094" 

lang="en">Returns a <code>NodeList</code> of all the <code>Element</code>s 
with a given tag name in the order in which they are encountered in a 
preorder traversal of the <code>Document</code> tree.</q>.</p> 

<p>Qu'est-ce qu'une <code>NodeList</code> ? C'est une interface 
d'enumeration de nœuds. La specification la decrit ainsi : 
</p> 

<bl ockquote ci te="http : //www . w3 . or g/TR/DOM- Level -2-Core/core . html #ID- 
536297177" lang="en"> 

<p>The <code>NodeList</code> interface provides the abstraction of 
an ordered collection of nodes, without defining or constraining how 
this collection is implemented. <code>NodeList</code> objects in the DOM 
are live.</p> 

<p>The items in the <code>NodeList</code> are accessible via an 
integral index, starting from 0.</p> 
</blockquote> 

<p>Voici le code necessaire. Par simplicity, on suppose qu'une fonction 
<code>getInnerText</code> existe  :</p> 

<pre class="code"> 
<b>function</b> printLabelsInfoO { 
<b>var</b> msg = ' ' ; 

<b>var</b> labels = document .getElementsByTagNameC label ') ; 
<b>for</b> (<b>var</b> index = 0; index < labels. length; ++index) { 
<b>var</b> label = labels [index] ; 
msg += getlnnerText(label) ; 

<b>if</b> (label .hasAttribute('for') && 
document. get El ementByld (label .html For)) 
msg += ' ->' + label .html For; 
<b>if</b> (label .hasAttribute('accesskey')) 

msg += ' (Alt+' + label .accessKey) ' ; 
msg += '\n' ; 
} 

alert(msg) ; 
} <i>// printLabelsInfo</i> 
</pre> 

<p>Sauvegardez ce code dans un fichier <tt>labels. js</tt>. Vous 
remarquez qu'il est de faible taille  :</p> 
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<pre class="console"> 

<samp>$</samp> <kbd>ls -l</kbd> 

<samp>total 4 

-rw-r--r-- 1 demo demo 530 2006-08-23 16:58 labels. js 

$</samp> 

</pre> 

• On voit ici des exemples de nombreuses balises semantiques. On le voit, code 
represente du code de facon generale (lorsqu'il s'agit d'un nom de variable dans un 
code source, on utilise de preference var), et tt sert a indiquer les textes percus 
comme du contenu informatique mais qui ne sont pas forcement affiches par le 
systeme (samp), ni saisis (kbd). Classiquement, les noms de fichiers. 

• Dans un code source, on peut vouloir ameliorer la mise en page, par exemple en 
mettant les mots reserves en gras et les commentaires en italique, et peut-etre en 
gris. Ce nest que de la coloration syntaxique, sans semantique : i et b sont par- 
faits pour cela ! 

• Remarquez les citations breves, en ligne, avec q (et son attribut ci te pour avoir la 
source), et celles plus longues, en bloc, avec blockquote (et son attribut cite, la 
encore). 

La aussi, le HTML et la CSS ne totalisent que 3 Ko. Void le resultat, dote d'une 
legere feuille de styles. 



Figure A-4 

Notre fragment de 
documentation avec 
un style leger 
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Pour aller plus loin... 

Livres 

HTML avec CSS et XHTML Tete la premiere 
Elisabeth Freeman, Eric Freeman 
O'Reilly France, aout 2006, 720 pages (de bonheur) 
ISBN 2-841-77413-9 

Introduction a HTML et CSS 
Eric Sarrion 

O'Reilly, fevrier 2006, 231 pages 
ISBN 2-841-77400-7 

HTML et CSS 2 

Molly Holzschlag 

Pearson Education, septembre 2005, 330 pages 

ISBN 2-744-01994-1 

Design web : utiliser les standards 
Jeffrey Zeldman 

Eyrolles, avril2005, 414 pages (d'evangile) 
ISBN 2-212-11548-2 

HTML : precis et concis 

Jennifer Niederst 

O'Reilly, avril 2002, 122 pages (d'aide-memoire) 

ISBN 2-841-77157-1 



Sites 



Le W3C evidemment : http://w3.org. Et les recommandations fondamentales 
(seule la version anglaise a valeur de reference) : 

- HTML 4.01 : http://w3.org/TR/html401/ (version francaise a cette adresse : 
http://www.la-grange.net/w3c/html4.01/cover.html) 

- XHTML 1.0 : http://w3.org/TR/xhtml1/ (version francaise a cette adresse : 
http://www.la-grange.net/w3c/xhtml1/) 

OpenWeb, un excellent site didactique en francais, joli et pratique : 
http://openweb.eu.org/. On notera en particulier : 

— http://openweb.eu.org/articles/xhtml_une_heure/ 

— http://openweb.eu.org/articles/respecter_semantique/ 
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— http://openweb.eu.org/articles/html_au_xhtml/ 

— http://openweb.eu.org/articles/formulaire_accessible/ 

Pompage, excellent site voue a la traduction francophone d'articles de grande 
qualite sur la conception web : http://pompage.net. On notera particulierement, 
histoire de se mettre en appetit, les articles suivants : 

— http://pompage.net/pompe/bonpiedstandards/ 

— http://pompage.net/pompe/cederholm/ 

— http://pompage.net/pompe/separation/ 

— http://pompage.net/pompe/autableau/ 

— http://pompage.net/pompe/listes/ 

— http://pompage.net/pompe/listesdefinitions/ 

— http://pompage.net/pompe/doctypecontenttype/ 

AccessiWeb, la cellule accessibilite de BrailleNet, regorge de documentations et 
manuels pratiques en francais pour rendre vos sites et creations numeriques plus 
accessibles : http://www.accessiweb.org/. 

Opquast est un referentiel francais de bonnes pratiques de conception web clas- 
sees suivant de multiples axes, dote en plus d'un outil d'aide a 1'estimation et au 
suivi de la qualite de vos sites : http://www.opquast.com/. 

Alsa Creations est un site didactique regorgeant d'excellents articles sur les stan- 
dards, XHTML et CSS : http://www.alsacreations.com/. Un forum permet par 
ailleurs aux visiteurs de s'entraider. 
A List Apart est un incontournable : http://alistapart.com/. 
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Aspect irreprochable 
et flexible : CSS 2.1 



Cette annexe n'a pas l'intention de vous apprendre CSS. Le sujet est si vaste, et les 
subtilites si nombreuses, qu'il faut pour cela des livres entiers (et il y en a d'excellents, 
voir la fin de 1' annexe). II s'agit juste de faire le point sur la prise en charge des CSS 
dans les navigateurs, de rappeler quelques grandes notions fondamentales (structure 
des regies, cascade, modeles fondateurs), et de fournir un tour d'horizon des selec- 
teurs et proprietes. 

Notez que ce survol sera moins detaille que pour 1' annexe A, dont l'objectif etait 
d'attirer votre attention sur des bons ou mauvais usages frequents et de mettre en 
avant des attributs sous-employes, ce qui exigeait de longues descriptions et quelques 
exemples solides. Ici, on a plutot une sorte de reference laconique. 
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Statut, etat et vocabulaire 

CSS est un standard W3C, publie sous forme de recommandations. A l'exception de 
(X)HTML, il n'y a sans doute pas de standard du Web plus utilise que CSS. 



Les versions de CSS 



Tableau B-1 Les versions du standard CSS 




Prise en charge actuelle 

Comme on peut le voir dans l'avant-propos, la prise en charge de CSS est generale- 
ment bonne, avec quelques ecarts. Pour simplifier, on peut dire qu'avec la sortie de 
MSIE 7, tous les navigateurs veritablement repandus prendront decemment en 
charge CSS 2.1. 

Void tout de meme un petit bilan (mais n'hesitez pas a consulter les informations 
techniques de vos navigateurs cibles : ces donnees evoluent souvent). Attention : les 
informations pour MSIE supposent une page en mode strict (utilisation d'un 
DOCTYPE sur une DTD (X)HTML Stri ct). Voir l'annexe A a ce sujet. 
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Les adjectifs expriment le degre de prise en charge. 



Navigateur 


CSS1 


CSS 2 


CSS 2.1 


CSS 3 


MSIE6 


Bon 


Moyen 


- 


- 


MSIE7 


- 


- 


Tres bon 


Bon 


Mozilla, Firefox, Camino 


- 


- 


Tres bon 


Leger 


Safari 


- 


- 


Tres bon 


- 


Opera 


- 


- 


Excellent 


Bon 


Konqueror (KDE 3.5) 


- 


- 


Tres bon 


Leger 



Les parties les moins bien prises en charge de CSS 2.1 concernent surtout les feuilles 
de styles auditives {aural style sheets), qui visent a controler la lecture vocale des 
pages : sexe de la voix, richesse, prosodie, intonation, debit... Ce ne sont pas vrai- 
ment les navigateurs qui doivent implementer cela, mais les lecteurs d'ecran ! 



Le jargon CSS 



Lorsqu'on park de CSS, certains termes precis reviennent regulierement. Repre- 
nons-les ici avant de poursuivre la lecture de cette annexe. 

• Une propriete est un nom specifique representant un aspect CSS. Par exemple, 
font-weight gere l'epaisseur des caracteres (normale, grasse, etc.) tandis que 
white-space regit le traitement des espacements et retours chariot. Chaque pro- 
priete dispose d'une serie de valeurs possibles, avec generalement plusieurs syn- 
taxes autorisees. Elle peut avoir une valeur par defaut, beneficier ou non de l'heri- 
tage par cascade, et ne s'appliquer qua certains elements. 

• Un selecteur est un texte respectant une syntaxe speciale qui permet de designer 
des elements de la page en fonction de criteres varies : leur nom de balise, leur ID, 
leurs classes CSS, la presence d'un attribut, leur position dans le document, la 
langue de leur contenu, etc. En combinant des selecteurs, on peut decrire une 
extraction tres fine et precise d'elements dans le document. 

• Une regie est l'element de base d'une feuille de styles CSS : elle definit une serie 
de proprietes pour les elements designes par un ou plusieurs selecteurs. 

Pret pour un exemple qui ha d'autre interet que justement de servir d'exemple ? 
C'est parti. Dans le code CSS suivant : 

#examples tr .critica"l>th:fi rst-child, th. critical { 

background: red; 

color: white; 

font-weight: bold; 
} 
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• #examples est un selecteur d'lD, l'espace qui suit est un selecteur de descendant, 
tr est un selecteur de type, .critical est un selecteur de classe, le chevron fer- 
mant (>) est un selecteur d'element fils, th est un selecteur de type, : f i rst-chi 1 d 
est un pseudo-element et la virgule est un operateur de groupement entre deux 
combinaisons de selecteurs. Si vous etes perdu, ne vous en faites pas, on reverra 
ces selecteurs plus loin. 

• background, color et font-weight sont des proprietes, dont red, white et bold 
sont les valeurs respectives. 

• L'ensemble du fragment constitue une regie. 

Histoire de ne pas vous faire languir si vous n'etes pas tres au point cote CSS, la regie 
s' applique ici aux elements suivants : 

• Les elements th, apparaissant comme premier element fils dans les tr ayant une 
classe CSS critical, lesquels apparaissent quelque part dans un element d'lD 
examples. 

• Les elements th ayant une classe CSS critical. 



Bien comprendre la « cascade » et I'heritage 

Les feuilles de styles applicables a un document peuvent avoir trois origines : 

• Le navigateur, qui fournit generalement une feuille de styles par defaut (grace a 
laquelle les titres sont plus gros, en italique, etc.). 

• L'auteur du document; la feuille est alors generalement un fichier .ess associe 
par une balise link. 

• L'internaute, qui peut appliquer une feuille de styles utilisateur (pour peu que son 
navigateur l'autorise). 

La cascade determine comment selectionner, propriete par propriete, la valeur speci- 
fiee a retenir pour un element donne. Contrairement a une idee repandue, elle ne 
decrit pas le mecanisme d'heritage, bien plus simple et qui n'a pas besoin d'elle. Je 
reviendrai sur cet heritage un peu plus tard. 

Le sens de la cascade 

La cascade se deroule approximativement de la facon suivante : 
1 On recupere toutes les regies applicables (en vertu de leurs selecteurs) a 1' element 
concerne, pour le media courant (saviez-vous qu'on peut restreindre une feuille de 
styles a certains medias seulement, comme l'ecran, l'imprimante ou la video- 
projection ?). 
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2 On les trie par importance (presence de la clause ! important) et par origine, dans 
l'ordre suivant (du moins prioritaire au plus prioritaire) : 

a. regies « par defaut » venant du navigateur ; 

b. regies normales de l'internaute ; 

c. regies normales de l'auteur ; 

d. regies importantes de l'auteur ; 

e. regies importantes de l'internaute ; 

3 A priorite egale, on les trie par specificite (voir section suivante). 

4 Enfin, on trie par ordre d'apparition : quand plusieurs definitions ont la meme 
priorite et la meme specificite, la derniere est retenue. 

La syntaxe ! important en fin de declaration de propriete est la pour ameliorer 
l'accessibilite en garantissant a l'internaute la possibilite de remplacer une propriete 
qui nuit a son confort : il suffit de declarer une autre valeur dans une feuille de styles 
utilisateur, dotee de l'attribut final ! important. 



Calcul de la specificite d'une regie 

Voyons a present comment calculer la specificite, ou le « poids », d'une regie CSS. La 
specificite est une valeur a quatre composantes : a-b-c-d. Ces composantes etant 
souvent de valeur inferieure a 10, on a en general un nombre decimal entre et 9999. 
C'est le poids. Mais comment determiner la valeur de chaque composante ? 

a. La composante a vaut 1 pour un attribut HTML style, pour une feuille 
externe. 

b. La composante b estle nombre de selecteurs d'lD impliques (#truc). 

c. La composante c est le nombre de selecteurs sur attributs ([true], . bidule, 
: Tang (chose)), ainsi que les pseudoclasses (par exemple : hover ou : focus). 

d. La composante d est le nombre de selecteurs de type (par exemple hi) et de 
pseudo-elements (par exemple : first-child). 

Vous avez besoin d'exemples ? D'accord ! 

Tableau B-2 Exemples de calculs de specificite 



Selecteurs a b c d Total 


A 

















li 











li ->1 


1 


"li :fi rst-line 











li, :fi rst-line — >2 


2 


ul li 











ul.li -^2 


2 


ul ol + li 











ul.ol.li ^3 


3 
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Tableau B-2 Exemples de calculs de specificite (suite) 



Selecteurs 


a 


b 


c 


d 


Total 


hi + *[rel=up] 








[rel=up] ->1 


hl->1 


11 


ul ol li . red 








.red -h>1 


ul,ol,li -»3 


13 


li . red. level 








. red, .level — >2 


li -»1 


21 


#x34y 





#x34y->1 








100 


style="..." 


1 











1000 



Que se passe-t-il avec la presentation dans HTML ? 

Le detail obscur : si, horreur ultime, le HTML contenait des attributs de presenta- 
tion (vous savez, ces momies que sont bgcolor, border, align, etc.), le navigateur 
peut les prendre en compte a condition de les considerer comme des regies placees en 
debut de feuille de styles auteur, avec une specificite zero. En d'autres termes, elles 
seront prioritaires uniquement sur le style par defaut fourni par le navigateur et cede- 
ront devant toute specification de type CSS. 



L'heritage 



L'heritage est un mecanisme par lequel des elements voient certaines de leurs pro- 
prietes « heriter » leur valeur de celle utilisee par un element conteneur. 

Par exemple, si body precise une font-size de valeur large, les elements p a l'inte- 
rieur de body (directement ou non) utiliseront la meme valeur pour leur propre font- 
si ze, sauf instruction contraire. 

Pour bien comprendre le role de l'heritage, il faut examiner comment le navigateur 
determine la valeur concrete d'une propriete. II ne suffit pas de prendre la valeur spe- 
cifiee dans la CSS, loin de la ! 

Pour commencer, sachez qu'un navigateur doit avoir defini une valeur concrete pour 
toutes les proprietes de tous les elements lorsqu'il a acheve le rendering de la page ! Cela 
fait done beaucoup de valeurs, meme si on exclut les proprietes qui ne s'appliquent pas 
au media courant (par exemple, les proprietes de pagination lorsqu'on affiche a l'ecran). 

Cette valeur concrete {actual value dans la specification) est le resultat d'un calcul en 
quatre etapes. Dit comme cela, 9a semble tres complique, mais vous allez voir, e'est 
en fait plutot naturel. 

On commence par determiner la valeur specifiee, celle qui fait l'objet d'une declara- 
tion ou d'une valeur par defaut. Pour cela, on cherche une valeur indiquee explicite- 
ment dans les CSS, en resolvant les conflits eventuels a l'aide de l'algorithme de cas- 
cade decrit ci-dessus. 
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C'est la que l'heritage peut entrer en jeu. Chaque propriete peut ou non en beneficier 
automatiquement : cela est precise dans la specification CSS 2.1, a l'aide de la caracte- 
ristique Inheritable. Si on n'a pas trouve de valeur explicite pour une propriete 
« heritable », on utilise alors la valeur calculee de l'element parent (pour lequel toutes 
les proprietes ont deja ete resolues). On peut obtenir le meme effet pour une propriete 
sans heritage automatique, en definissant la propriete avec la valeur speciale i nheri t. 

De la valeur specifiee a la valeur concrete 

En revanche, s'il n'y a pas d'heritage (la propriete n'est pas definie et elle ne beneficie 
pas d'un heritage automatique), on utilise alors la valeur initiale, indiquee dans la 
specification CSS 2.1 pour cette propriete. 

Deuxieme etape : obtenir la valeur calculee. II s'agit d'ajustements a la valeur speci- 
fiee, par exemple la transformation d'URI relatifs en URI absolus, la conversion de 
tailles en unites relatives (em, ex...) en unites absolues (px), et tout autre changement 
qui n'a pas besoin d'un veritable rendering pour etre determine. Cette valeur existe 
pout tout element, meme si la propriete ne s'applique pas a l'element lui-meme, afin 
de pouvoir utiliser l'heritage sur ses elements descendants. 

Troisieme etape : passer a la valeur utilisee. On effectue alors les conversions resul- 
tant d'un rendering, comme transformer une largeur exprimee en pourcentage en une 
largeur absolue (puisqu'on connait alors la largeur reelle de son conteneur). 

Ultime etape, qui n'interesse d'ailleurs pas toujours le developpeur web : la valeur 
concrete, celle reellement employee. C'est le resultat des contraintes externes 
(notamment celles du peripherique) sur la valeur utilisee. Par exemple, une largeur 
absolue peut encore etre de 2,8 pixels, alors qua l'ecran, on ne peut afficher que des 
pixels entiers ; on arrondira done a 3. Une police pourrait demander du 13 points, 
mais si le systeme de gestion des polices ne peut obtenir cette taille exacte, on ajus- 
tera sur la taille la plus proche, par exemple 12 points. Le document est en couleurs, 
mais l'imprimante n'autorise que les nuances de gris ; on interpole done les valeurs 
vers de telles nuances. Vous voyez l'idee. 

Voila certainement plus d'informations que vous ne souhaitiez en avoir. II est vrai 
que ce sont surtout les deux premieres etapes qui nous interessent ! 



Les modeles des boftes et de mise en forme visuelle 

Je vous l'annonce sans ambages : nous n'irons pas dans tous les details, loin s'en faut. Le 
modele des boites {box mode!) a fait couler tant d'encre et d'octets qu'on pourrait remplir 
un volume encyclopedique avec la somme des articles, chapitres et billets sur le sujet. 
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Je vais simplement couvrir la partie emergee, l'essentiel, le courant, sans me soucier 
des cas particuliers. 

Les cotes d'unc boTte : ordre et syntaxes courtes 

De tres nombreuses proprieties CSS peuvent s'appliquer sur les quatre cotes d'une 
boite, ou sur ses cotes horizontaux (haut et bas) et verticaux (droite et gauche), ou sur 
ses quatre cotes individuellement. Vous trouverez alors toujours des proprietes dites 
« abregees » {shorthand properties), permettant de specifier ces cotes d'un seul coup. 

Les variantes et 1' ordre sont toujours les merries, aussi je les precise ici une bonne fois 
pour toutes. Prenons l'exemple de la propriete margin, qui regit la marge externe 
d'une boite, comme nous le verrons a la prochaine section. 

II existe des proprietes dediees pour chaque cote: margin-top, margin-right, 
margin-bottom et margin-left. II existe aussi la propriete courte margin, justement, 
qui peut prendre les trois formes suivantes. 

Tableau B-3 Variantes de definition d'une propriete courte 



Variante de format Resultat 


margin: lem; 


Meme marge pour les quatre cotes : lem. 


margin: lem auto; 


Marge de lem en haut et en bas, marge automatique (centrage de bloc) a 
droite et a gauche. 


margin: lem 0. 5em 


Marge haute de lem, droite et gauche de 0, basse de . 5em 


margin: 0.5em lem 2ex; 


Marge haute de . 5em, droite de 0, basse de lem, gauche de 2ex. 



Si vous avez du mal a retenir l'ordre, pensez a ceci : on part du haut et on suit les 
aiguilles d'une montre. 



Unites absolues et relatives 

CSS fournit de nombreuses unites pour exprimer des tailles (de police, de bloc...). 
Certaines sont absolues et d'autres relatives. Certaines n'ont de sens que pour cer- 
tains medias. En voici un recapitulatif. 

Tableau B-4 Unites de CSS 2.1 

Unite Nature Signification 

% relative Pourcentage de la valeur calculee heritee (ou initiale, pour body). Par exemple dans un 

body avec font-size: 1. 5em, un p avec font-size : 150 % aura en fait un 
font-size de 2 .2 5em. 
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Tableau B-4 Unites de CSS 2.1 (suite) 





cm 


absolue Centimetres. S'ajuste normalement aux resolutions de I'imprimante comme de I'ecran 
(72 ou 96 ppp). 


em 


relative 


La hauteur de la police courante, definie comme le em square typographique. En gros, en 
depit de ses origines liees a la largeur, c'est a peu pres la hauteur d'un caractere majuscule. 
Unite de choix pour les marges et espacements en general (meme si j'ai plus tendance a 
limiter aux cotes haut et bas) et aux hauteurs de blocs. 


ex 


relative 


La hauteur d'un caractere minuscule sans jambe (on utilise generalement « x »). Correspond 
souvent a la largeur moyenne d'un caractere : un conteneur de largeur lOex peut contenir 
environ 1 caracteres. 

Unite pertinente aussi pour les marges et espacements en general (je ['utilise surtout pour 
les bords droit et gauche, et les largeurs de blocs). 


in 


absolue 


Pouces (inches). Je rappelle qu'un pouce vaut 2,54 cm. Meme remarque que pour cm. 


mm 


absolue 


Millimetres. Meme remarque que pour cm. 


PC 


absolue Picas (unite typographique). Cette merveilleuse unite semi-prehistorique vaut 1 2 points 
imprimante (voir pt). 


Pt 


absolue Points. Unite typographique qui n'a vraiment de sens que pour une CSS d'impression (media 
imprimante print). CSS 2.1 cale le point a 1/72 de pouce, soit environ 0,35 mm. Pas etonnant que 
beaucoup preferent le systeme metrique aux unites britanniques. 
Notez que lors de I'impression, caler les tailles de fontes en points est bien plus pertinent 
qu'en em/ex, car cela favorise I'homogeneite a travers les imprimantes et systemes. 


px 


classee relative, Pixels. Unite un peufourbe, car selon la resolution de I'ecran (pas 1024 x 768, mais72 ppp), 
mais plutot un pixel sera plus ou moins gros. Sur Mac OS (avant OS X) notamment, les pixels etaient 
« absolue ecran » notoirement plus petits, ce qui rendait toute police 10 px illisible. 

N'utilisez cette unite que pour des elements dont la taille doit coller a des ressources non 
redimensionnables, comme des images. Pour du texte, je suis partisan de la proscrire, sur- 
tout sur des petites et moyennes tailles (moins de 30 px), car le texte ne peut alors pas 
etre redimensionne (notamment agrandi) suivant les besoins de I'internaute. 



Je vous recommande tres, tres chaudement d'utiliser des unites relatives pour tout ce 
qui a vocation a suivre la taille du texte. Cela inclut souvent les bordures, les marges, les 
positionnements, et suivant l'esthetique retenue, parfois les espacements (paddings). 

Ainsi, l'ensemble de votre page s'ajustera mieux lorsque I'internaute modifiera la 
taille de base des polices de caracteres pour y voir plus clair, ce que tous les naviga- 
teurs repandus permettent de faire. 

On donnera, notamment, priorite a em, ex et % a I'ecran, et pt a I'impression ! 

Derniere remarque : pour une taille de zero, on ne precise pas l'unite en general. 
C'est en effet mal vu par les esthetes (on parle de bad form), car zero est zero, quelle 
que soit l'unite. 
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Marge, bordure et espacement 

Une boite est dotee, de l'exterieur vers l'interieur, d'une marge (espacement externe a 
sa bordure), d'une bordure (avec une couleur, un type de trait et une epaisseur), d'un 
espacement {padding en anglais, espacement interne a la bordure), et tout au centre, 
de son contenu. Le schema suivant illustre cette imbrication : 



Figure 2-1 

Imbrication de marge, bordure, 
espacement et contenu 



_ Haut _ 
Marge haute (la marge est transparente) 




Marge basse 
Bas 



A present, un point tres important, car contre-intuitif : la largeur et la hauteur d'un 
element sont en realite les dimensions de son contenu. Prenons la regie suivante : 

div#demo { 

width: 40ex; 

padding: lex; 

border: lex solid gray; 

margin: lem lex; 
} 

Le div d'lD demo aura une « largeur visuelle » de 44ex ! En effet : 

40ex + 2 x lex + 2 x lex = 44ex 

II s'agit de sa largeur de contenu, a laquelle on ajoute les largeurs des espacements 
gauche et droit ainsi que celles des bordures gauche et droite. 
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Elements en ligne et de type bloc 

La plupart des elements censes faire partie du flux d'un texte sont dits « en ligne » 
(inline). Ceux censes apparaitre comme des blocs hors du flux du texte sont dits « de 
type bloc » (block-level). 

II existe en realite toute une gamme de cas specialises, definis par la propriete 
display. CSS 2 a notamment ajoute toute une serie de valeurs specifiques aux com- 
posants de tableaux de donnees. 

Des elements naturellement en ligne (par exemple span, em, strong, code) peuvent 
devenir de type bloc a l'aide de la propriete di splay, et reciproquement. 

Je mentionne cela parce qu'un element en ligne a certaines limitations en terme de 
modele des boites. Par exemple, il n'a pas de marge verticale (haute ou basse). 

Elements remplaces 

Void l'astuce du jour... Si vous lisez la specification CSS 2.1, vous trouverez un peu 
partout le terme « element en ligne non remplace » (non-replaced inline element). On 
peut legitimement se demander a quoi rime ce « non remplace », qu'on voit un peu 
partout. La reponse se cache a la section 3.1 de la recommandation, dont le titre, 
« Conformite », ne nous l'aurait pas laisse supposer. 

Un element remplace est un element hors du champ d'action du formateur CSS, en 
tout cas en ce qui concerne ses dimensions propres. Dans la pratique, c'est l'image 
obtenue par chargement d'une balise i mg ou alors le contenu charge par une balise 
object. Tout autre element en ligne est done non remplace, ce qui rend cette preci- 
sion superflue dans la plupart des cas. 

Fusion des marges 

Les marges expriment generalement un besoin d'espace autour d'un element. 
Cependant, dans le cas des marges verticales, il est souvent inutile de cumuler les 
marges. Imaginons qu'on utilise la regie suivante : 

p { margin: lem 0; } 

Cette regie demande des marges haute et basse, dites « marges verticales », de lem 
(hauteur moyenne d'un texte dans la police de caracteres active), et pas de marges 
horizontales (droite et gauche). 
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Pourtant, lorsqu'on va enchainer deux paragraphes, il serait curieux, voire agacant, 
que ces marges se cumulent, produisant un espacement de 2 lignes de haut entre les 
paragraphes. Ce nest generalement pas l'intention de l'auteur de la regie. Pour cette 
raison, dans de nombreuses situations, CSS 2.1 fusionne les marges verticales. Pour 
faire simple, lorsqu'on a deux marges verticales adjacentes, on n'utilise que la plus 
grande des deux. 

Attention toutefois, ce mecanisme n'a pas court dans tous les cas. La section 8.3.1 de 
la recommandation W3C detaille les cas concernes, dont la liste exhaustive va au- 
dela du role de cette annexe. 

Le model e W3C et le modele Microsoft 

Void la source de bien des soucis, en tout cas il n'y a pas si longtemps (de nos jours, a 
peu pres tous les professionnels ont pris le pli). Les developpeurs de MSIE avaient a 
l'origine mal interprete le sens des proprietes width et height. lis pensaient que ces 
dimensions incluaient l'espacement et la bordure. 

Ce n'est pas deraisonnable : dans la pratique, quand vous faites reference aux dimen- 
sions d'une boite, vous parlez des bords exterieurs de la boite, pas de la taille du con- 
tenu cale dans la boite par des protections en mousse ou en polystyrene. Helas, ce 
n'est pas le sens retenu par la recommandation W3C. 

Le souci est apparu des que les autres navigateurs ont rattrape MSIE 5 sur le terrain 
des CSS. Ces navigateurs implementaient correctement la recommandation, et on s'est 
retrouve avec des incoherences flagrantes entre l'affichage MSIE et celui des autres 
navigateurs. Je m'en souviens encore, et croyez-moi, 9a nous a tous fait fulminer. 

MSIE 6 a done sorti une astuce, le doctype switching, expliquee au debut de 
l'annexe A, qui a rapidement ete reprise par les autres navigateurs pour laisser 
l'auteur de la page decider de Interpretation de width et height. 

Lorsqu'une page declare une DTD stricte (HTML 4.01 Strict ou XHTML 1.0 
Strict, par exemple), le navigateur fonctionne en Strict Mode. On respecte alors la 
definition du W3C. Si une page ne declare pas de DTD ou declare une DTD non 
stricte, le navigateur utilise le Quirks Mode, qui simule le comportement de l'ancien 
MSIE, en considerant que l'espacement et la bordure sont compris dans la taille. 

En realite, de nombreux navigateurs utilisent aussi le Quirks Mode pour emuler 
d'autres erreurs CSS de MSIE, et pas seulement de la version 5.5... Mais e'est un 
autre debat. 

En conclusion : declarez toujours une DTD, et quelle soit stricte, bon sang ! 
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Tour d'horizon des selecteurs 

CSS 2.1 definit de nombreux selecteurs (et si vous voyiez CSS 3 !). En void un tour 
d'horizon. Attention, certains ne sont pas pris en charge par MSIE 6, voire par quel- 
ques autres navigateurs. 

Tableau B-5 Les selecteurs de CSS 2.1 



Selecteur Description 


& 


Selecteur universel. Correspond a tous les elements. 


bal i se 


Selecteur de type. Correspond aux elements ayant ce nom de balise. 


bal i sel balise2 


Selecteur de descendants. Correspond aux elements bal i se2 quelque part a 
I'interieur d'un element bal i sel, a quelque niveau de profondeur que ce soit. 


.classe 


Selecteur de classe. En (X)HTML, equivalent a *[class~=" classe"] 
(voir plus bas). 


#unID 


Selecteur d'ID. Correspond a I'element dont I'attribut id a la valeur unlD. 


bal ise: link 
bal ise: visited 


Pseudoclasses de lien. Correspond aux elements bal i se (qui doivent etre des 
sources de lien, done generalement des elements a) dont la cible n'a pas encore (ou 
a deja, respectivement) ete visitee. 


bal ise: hover 
bal ise: active 
bal ise: focus 


Pseudoclasses dynamiques. Correspond aux elements bal i se a certains moments 
de I'interaction utilisateur. Respectivement, il s'agit d'un survol souris, d'une activa- 
tion (die ou touche Entree, par exemple) ou de I'obtention du focus (arrivee sur 
I'element par tabulation, par exemple). 


bal i sel > balise2 


Selecteur de fils. Correspond aux elements bal i se2 dont I'element pere est un ele- 
ment bal i sel. Plus restrictif, done que I'espace, qui n'a pas de limite de profondeur. 


bal i sel + balise2 Selecteur d'element adjacent. Correspond a un element bal i se2 dont le prece- 
dent element frere est de type bal i sel. Par exemple, h2 + p selectionne les 
paragraphes qui suivent immediatement des titres de deuxieme niveau. 


bal i se : f i rst-chi 1 d 


Pseudoclasse de premier fils. Correspond a tout element bal i se etant le premier 
element fils de son element pere. Par exemple, permet de selectionner le premier 
paragraphe d'une serie. 


bal ise [attr] 


Selecteur d'attribut. Correspond a tout element bal i se ayant un attribut attr 
(quelle qu'en soit la valeur, meme vide). 


bal i se [attr="val ue"] 


Selecteur d'attribut. Correspond a tout element bal i se dont I'attribut attr a 
exactement la valeur val ue (sensible a la casse). Les guillemets sont obligatoires. 


balise[attr~="part"] Selecteur d'attribut Correspond a tout element bal ise dont I'attribut attr con- 

tient une serie de valeurs separees par des espaces, et dont I'une est part. Voir 
I'equivalence du selecteur de classe. 


bal ise [attr |="prefix"] 


Selecteur d'attribut. Correspond a tout element bal i se dont I'attribut attr 
contient une serie de valeurs separees par des tirets (-), et dont la premiere est 
p ref i x. Utile pour I'attribut 1 ang, par exemple. 


:lang(code) 


Pseudoclasse de langue. Correspond a tout element dont la langue correspond a code. 
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Groupement 



Afin de limiter la duplication (cauchemar de la maintenance), on peut affecter une 
serie de proprietes a plusieurs selections (combinaisons de selecteurs) disjointes, en 
les separant simplement par des virgules. 

hi, h2, h3, h4, h5, h6 { 
font-weight: normal; 
} 

Dans cet exemple, tous les titres utiliseront une epaisseur normale au lieu de la 
graisse par defaut. 



Pseudo-elements 



Un pseudo-element correspond a une portion de texte a l'interieur d'un element, ou 
a un contenu genere dynamiquement. En tout etat de cause, il s'agit d'un fragment 
du document qui ne correspond pas a un element, mais fait neanmoins l'objet d'une 
selection. 



Pseudo-element 

E:fi rst-line 



E:fi rst-letter 



E: before 
E: after 



Tableau B-6 Les pseudoclasses de CSS 2.1 

Description 

Premiere ligne d'un corps de texte. E doit etre element de type bloc, i nl i ne-bl ock, 
table-caption ou table-cell. On evitera done span, par exemple. 

Premiere lettre d'un contenu textuel, sauf si cette lettre est precedee d'un autre contenu 
(image, tableau en ligne...). Toutes les proprietes CSS ne s'appliquent pas (voir section 5.12.2 
de la recommandation). Principalement utilise pourfaire des lettrines. S'applique aux memes 
types d'element que : fi rst-line, plusau type list-item. 

Permettent de generer un contenu avant ou apres le texte normal de I'element, a I'aide de la 
propriete CSS content. Tres utilises pour assortir les liens de petits glyphes ou d'informa- 
tions sur la langue (attribut HTML h ref 1 ang)... Tres pratique aussi pour une feuille de styles 
dediee a I'impression (media pri nt), qui peut ainsi afficher, a cote du texte des liens, les 
URL ciblees. 
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Tour d'horizon des proprietes 

II est temps de faire le tour des proprietes. Pour toutes celles qui ont des versions 
courtes, j'ai adopte une notation a lignes multiples, avec les possibilites entre cro- 
chets, listees dans l'ordre de leur apparition au sein de la propriete courte. 

Chaque ligne supplemental constitue une composante optionnelle. La propriete 
border est la plus riche, puisqu'elle va d'une seule propriete consolidee (border) 
jusqu'aux proprietes tres ciblees (par exemple border-left-style). 

Je precise aussi une bonne fois pour toutes que toutes les proprietes peuvent valoir la 
fameuse valeur inherit. Je ne le preciserai pas dans les tableaux. 

De Tart de realiser des CSS legeres 

CSS fournit de nombreuses syntaxes courtes pour simplifier et alleger vos CSS. Nous 
avons deja evoque ce mecanisme dans le cadre des proprietes de marge, bordure et 
espacement. Allez done consulter la recommandation pour le detail des autres pro- 
prietes courtes, notamment font, une vraie merveille ! 

Par ailleurs, toute propriete de couleur peut avoir les syntaxes suivantes : 

• transparent, mot reserve, utile entre autres pour preciser une couleur de fond 
chaque fois qu'on precise une couleur de texte (evitant ainsi les avertissements des 
validateurs). 

• #rrvvbb, ou on represents les composantes rouge, verte et bleue par une valeur 
hexadecimale (entre 00 et ff ), de a 255. 

• #rvb, lorsque les composantes sont des doublons (par exemple 11, 44 ou ff). Ces 
couleurs sont censees etre plus fiables en rendu que les variantes detaillees (#463, 
equivalent de #446633, est censee etre plus « garantie » que #426431, qui lui res- 
semble a s'y meprendre). 

• rgb(red, green, blue~), ou les composantes sont indiquees en base decimale, de 
a 255. A mon sens la plus verbeuse, done a eviter. 

• Mot reserve de couleur, par exemple whi te ou red. La recommandation definit en 
section 4.3.6 les 17 noms autorises et leurs valeurs exactes. 

N'oubliez pas qu'une feuille CSS plus courte est aussi plus rapide a charger, et pas 
forcement plus difficile a lire ! 
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Proprietes du modele des boites : marges, espacements et bordures 

Tableau B-7 Proprietes du modele des boites en CSS 2.1 



Propriete Description 


border 

- [top 1 right! 

bottom! left] 
- [width 1 style 1 color] 


Bordures. L'epaisseur est exprimee en tant que taille ou a I'aide des mots reserves 
thi n, medi urn et thi ck. On compte pas moins de 10 styles, les plus courants etant 
solid, dotted, dashed et none (qui differe de hidden pour les cellules de 
tableaux !). 

Au fait, MSIE 7 cessera de dessiner les bordures dotted d'epaisseur lpx en 
dashed. Enfin ! 


margin 
- [top 1 right / 
bottom! left] 


Marges, done espacements exterieurs. 


padding 
- [top 1 right! 
bottom! left] 


Espacements interieurs. 



Proprietes de formatage visuel : 
positionnement, largeur, hauteur, baseline 

Tableau B-8 Proprietes de formatage visuel en CSS 2.1 



Propriete Description 


clear 


Controle le flux autour d'un element flottant. Peut valoir none, 1 eft, right ou 
both. 


clip 


Permet de restreindre la portion affichee d'un element. Par defaut auto, done affiche 
toute la botte. Sinon peutdefinirun rectangle avec rect( top, right, bottom, 
left). 


di recti on 


Indique le sens du texte dans I'element. Vaut 1 1 r (de gauche a droite, par defaut) ou 
rtl. 


display 


Indique le type de boite de I'element. Les valeurs les plus courantes sont i nl i ne, 
block et none, mais il yen a 13 autres, dont 10 relatives aux tableaux ! 


float 


Rend un element flottant, e'est-a-dire extrait du flux normal du texte pour aller se 
caler quelque part contre les bords du conteneur, le flux du texte s'enroulant autour 
de lui. Suivant le cote du flottement, vaut 1 eft, ri ght ou bien sur none, sa valeur 
par defaut. 


height, min-height, 
max-height 


Regissent la hauteur d'un element, en collaboration avec overflow. 
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Tableau B-8 Proprietes de formatage visuel en CSS 2.1 (suite) 





line-height 


Hauteur minimale de ligne, ce qui inclut le texte et un espacement au-dessus et en 
dessous du texte. Vaut normal par defaut (base sur les caracteristiques de la police 
de caracteres), sinon un nombreou un pourcentage (multiplicateur de font-size), 
ou encore une taille specifique (avec des unites, par opposition a un simple nombre). 


overflow 


Gere le depassement de contenu vis-a-vis des dimensions souhaitees de la botte. Vaut 
par defaut vi si bl e : la boTte s'adapte, notamment en hauteur. Peut aussi valoir 
hidden (le contenu est tronque), scroll (barres de defilement presentes qu'on en 
ait besoin ou non) ou auto (barres de defilement, si besoin). 


posi ti on Definit le positionnement de I'element. Vaut stati c par defaut (positionnement 

defini par le navigateur suivant les contraintes actives), mais peut aussi valoir 
absol ute, rel ati ve ou f i xed (lequel est enfin pris en charge par MSIE 7). 


top, right, bottom, left 


Pour un element positionne, fournit les positions de ses exterieurs de marge (absolues 
ou relatives, suivant position). 


unicode-bidi 


Permet a la valeur de direction de fonctionner egalement sur un element en ligne. 


vertical -align 


Fournit I'alignement vertical de contenu en ligne (ou du contenu d'une cellule de 
tableau). Les valeurs ont toutes rapport aux metriques de typographie : le defaut est 
basel i ne, et on en a 7 autres dont mi ddl e et text-top, plus la possibility 
d'une taille ou d'un pourcentage. 


visibility 


Affiche ou masque un element, tout en conservant I'espace occupe (contrairement a 
display). Outre les valeurs visible et hidden, une valeur collapse a un 
sens special pour les lignes et groupes (de lignes ou de colonnes) des tableaux. 


width, min-width, 
max-width 


Regissent la largeur d'un element. 


z-index 


Utilisee uniquement sur les elements positionnes. Indique leur position « verticale », 
entre I'ceil de I'internaute et le document si vous preferez. Peut valoir auto (defaut) 
ou un numero. Regie les questions de recouvrement entre elements se superposant, 
par exemple lors d'un glisser-deplacer. 



Proprietes de contenu genere automatiquement 

CSS 2 a introduit la notion de contenu automatique, principalement sur trois axes : 

• Du contenu entierement synthetise par la CSS, generalement present devant ou 
derriere le contenu natif de I'element. 

• Des indices incrementaux ; principalement pour les listes, mais aussi pour les 
titres par exemple (enfin des titres numerates automatiquement, et hierarchique- 
ment si on le veut !). 

• Des symboles ou images destines aux listes a puces. 
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Tableau B-9 Proprietes de contenu automatique en CSS 2.1 



Propriete 


Description 


content 


Remplace le contenu de I'element. On ['utilise principalement sur des 
selecteurs de pseudo-elements : before ou : after, pour ajouterplu- 
tot que remplacer. Peut valoir une foule de choses : un texte fixe, une res- 
source externe dont on fournit I'URI, I'etat d'un compteur, la valeur d'un 
attribut de I'element (comme hreflang), I'ouverture ou la fermeture 
des guillemets ou encore le controle du niveau d'imbrication de ceux-ci. 


counter-increment Incremente un ou plusieurs compteurs deja definis. Utilise des paires 

nom x increment, I'increment etant optionnel et valant par defaut 1 (un). 
Voir I'exemple tres parlant de la section 12.4 de la recommandation. 


counter-reset 


Definit ou reinitialise un ou plusieurs compteurs, en precisant eventuelle- 
ment leurs nouvelles valeurs. Meme syntaxe que counter- 
increment. 


quotes 


Definit les paires de guillemets a utiliser dans I'element, niveau par 
niveau (pour des utilisations imbriquees). La valeur par defaut depend du 
navigateur. none supprime tout guillemet (pas tres utile...). Sinon, on 
precise des paires de textes, par exemple ' «\00a0 ' ' \00a0» ' ' " ' 
' " ' pour le francais (la sequence \00a0 represente une espace inseca- 
ble). A utiliser en combinaison avec les valeurs open-quote et 
close-quote de content. 


list-style Regit I'apparence d'une liste. Le type peut avoir pas moins de 15 valeurs 
- [type 1 position 1 image] dont 11 de numerotation (listes ordonnees), 3 de puces, et none pour 

retirer les puces ou numeros. La position vaut i nside ou outside 
(defaut), indiquant si les puces ou numeros s'affichent a I'interieur ou a 
I'exterieur de la boite des contenus. Enfin, image permet de remplacer 
les puces classiques par une image quelconque, dont on fournit I'URI. 



Proprietes de pagination 

Ces proprietes ne s'appliquent que dans le cadre d'un rendering sur media pagine, ce 
qui revient a dire : a l'impression (media print). On dispose alors d'une regie spe- 
ciale nommee ©page, qui designe la page physique et non un element du document. 



Propriete / pseudoclasse 

: first, :left, 



margi n 
-[topjrightj 
bottom I left] 



Tableau B-10 Proprietes de pagination en CSS 2.1 

Description 

right Pseudoclasses utilisables sur ©page pour regler par exemple les marges 
independamment pour la premiere page, les pages gauches (paires pour 
un document de gauche a droite) et les pages droites (impaires ibidem). 

Marges classiques ; je les remets ici car elles ont un sens particulier 
lorsqu'on les applique a ©page : ce sont alors les marges d'impression. 
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Tableau B-10 Proprietes de pagination en CSS 2.1 (suite) 



Propriete / pseudoclasse Description 


orphans 


Nombre minimum de lignes d'un bloc qui doivent apparaTtre en bas de 
page (lignes orphelines). Si le haut de la page est trap plein, le bloc 
demarre a la page suivante. La valeur est numerique, et vaut par defaut 2. 


page- break-after 
page- break-before 
page- break-in side 


Regissent les sauts de page. Appliquees a un element, elles determinent 
ce que le navigateur a le droit de faire apres, avant et a I'interieur de I'ele- 
ment, respectivement. Les deux premieres peuvent valoir auto (defaut), 
always (force le saut), avoi d (eviter a tout prix), 1 eft ou ri ght 
(forcer le saut jusqu'a une page gauche ou droite, par exemple pour un 
debut de chapitre). La derniere ne peut valoir que auto ou avoi d. 


wi dows 


Nombre minimum de lignes d'un bloc qui doivent apparaTtre en haut de 
page (lignes veuves). S'il ne reste pas assez de lignes dans le bloc, il 
demarre a cette page. La valeur est numerique, et vaut par defaut 2. 



Proprietes de couleurs et d'arriere-plan 



Tableau B— 11 Proprietes de couleurs et d'arriere-plan en CSS 2.1 

Propriete Description 

background Definit I'arriere-plan d'un element. On a d'abord sa couleur, puis une 

- [color I image I repeat I image a utiliser, son mode de repetition (« mosaT'que » : repeat par 
attachment I posi ti on] defaut, mais connaissez-vous repeat-x, repeat-y et no- 
repeat ?), son mode de defilement (scrol 1 par defaut, mais connais- 
sez-vous fixed ?) et sa position initiale dans I'element (par exemple 
top right, ou 15% bottom, ou 2cm top). 



color 



Couleur du texte. 



Proprietes de gestion de la police de caracteres 



Propriete 

font 

- [style/variant I 
weight J s ize j fami ly] 



Tableau B-12 Proprietes de la police de caracteres en CSS 2.1 

Description 

Regit la police de caracteres. Voila un cas ou bien apprendre la syntaxe 



consolidee de la propriete courte (font) est payant ! Le style est genera- 

lement normal ou italic, la variante normal ou small -caps, le 

poids normal ou bold (presque aucun systeme de polices ne gere plus 

de 2 degres de graisse...), la taille a une syntaxe plus complexe (voir 

ci-apres) et la famille aussi. 

La propriete courte peut aussi utiliser juste un nom reserve de police 

systeme. 
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Taille de police 

La taille peut etre exprimee avec un mot-cle absolu, un mot-cle relatif, une taille 
classique ou un pourcentage de la taille de reference. 

• Absolus : xx-small, x-small, small, medium (defaut), large, x-large, xx-large. 
Le rapport entre les valeurs successives n'est pas fixe, en particulier aux extremes. 

• Relatifs : smaller, larger. Decale la taille sur l'echelle des absolus, et si on est 
deja sur un extreme, interpole au mieux. 

Dans le cas ou la taille est precisee au sein de la propriete courte font, on dispose 
d'une syntaxe speciale qui permet de faire d'une pierre deux coups en precisant a la 
volee le line-height : on utilise font-size/line-height, c'est tres pratique et cohe- 
rent. Voir l'exemple un peu plus loin. 

Famille de polices 

La famille de polices permet de definir une serie de polices a tenter d'utiliser, par 
ordre decroissant de preference. II s'agit de noms de polices que le navigateur va 
chercher sur le systeme de l'internaute. Les noms a espaces doivent etre entre guille- 
mets. II est fortement conseille, pour des raisons d'accessibilite, de terminer la serie 
par un des noms generiques : 

• serif : police a empattements, par exemple Times ; 

• sans-seri f : police sans empattements, par exemple Arial ; 

• cursive : police a pleins et delies, par exemple Monotype Corsiva ou Zapf 
Chancery ; 

• fantasy : police « delirante », decalee, amusante ; 

• monospace : police a chasse fixe, par exemple Courier. 
Void un exemple : 

I font-family: "Bitstream Vera Sans Mono", Monaco, monospace; 

Tout specifier d'un coup ! 

Enfin, voici un premier exemple de propriete courte, qui resume tout ce qu'on a 
besoin de dire sur la police : 

font: 115%/1.4em "Bitstream Vera Sans Mono", Monaco, monospace 

Ici, on ne precise ni le style, ni la variante, ni le poids, mais directement la taille 
(115 %), la hauteur de ligne (l. 4em) et la famille. 
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Attention : certaines configurations partielles de style, variante et poids peuvent 
constituer une ambiguite : ainsi, si vous n'en precisez que une ou deux et utilisez la 
valeur normal pour la derniere, comment savoir de quelle propriete on parle ? II faut 
alors etre explicite, quitte a utiliser i nheri t pour maintenir les valeurs des proprietes 
qu'on ne souhaite pas affecter. 

font: normal 1. 5em/1.8em sans-serif; 

C'est ambigu : est-ce le type, la variante ou le poids qui est normal ? 
I font: italic normal inherit/120%; 

Et la, est-ce la variante ou le poids ? 

I font: italic inherit normal inherit/120%; 

Ici, pas de doute : c'est le poids, et on ne touche pas a la variante. 

Dernier point : les noms reserves de polices systeme, qui configurent toute la police 
d'un coup. Cela permet de realiser une interface coherente avec celle de systeme 
d'exploitation (ce qui permet, par exemple, de faire des bibliotheques comme Proto- 
type Windows). Les valeurs possibles sont : 

• capti on, utilisee pour les controles (composants visuels) a libelles (par exemple les 
boutons, les listes deroulantes). 

• i con, utilisee pour labeliser les icones (par exemple sur le bureau). 

• menu, utilisee dans les menus (barres ou surgissants). 

• message-box, utilisee pour les boites de dialogue a message. 

• small -capti on, utilisee pour labeliser les petits controles (comme les boutons de 
barres d'outils). 

• status -bar, utilisee par les barres d'etat. 

II suffit done d'utiliser par exemple : 

div#status { font: status-bar; } 

Pour avoir un element avec la fonte exacte des barres d'etat sur le systeme de l'inter- 
naute. 
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Proprietes de gestion du corps du texte 



Tableau B-13 Proprietes du corps du texte en CSS 2.1 



Propriete Description 


letter-spacing Espacement entre les lettres. Vautzero par defaut. Jeconseille vivement de n'utili- 
ser que des tailles en unite ex, tres adapt.ee. Rien qu'a . lex, on voit I'effet. 


text-align 


Alignement du texte dans un bloc. Peutvaloir left, center, right ou 
justify. 


text-decoration 


Regit I'apparence de traits au-dessus ou au-dessous du texte. Peut valoir none 
(defaut), underl i ne (soulignement), overl i ne (trait au-dessus du texte), 
line-through (texte barre) ou... oserai-je ledire ? Bon, blink, mais gare au 
premier qui s'en sert ! C'est moche et tout le contraire d'accessible ! 


text-i ndent Indentation de la premiere ligne d'un bloc de texte. 


text-transform 


Gere la casse. Peut valoir none (defaut), capi tal i ze (initiales en majuscules, 
autres lettres toutefois inchangees), uppercase (majuscules) ou lowercase 
(minuscules). Voir aussi font-variant dans le tableau B-12. 


white-space 


Gestion des espacements dans le corps du texte. Voir ci-apres. 


word-spacing 


Espacement entre les mots. Meme remarque que pour 1 etter-spaci ng. 



L'espacement dans le corps du texte 

La propriete white-space merite tout de meme une petite explication. 

En temps normal, le rendering d'un contenu texte retire tous les espacements (espaces, 
tabulations, retours chariot, etc.) au debut et a la fin du texte, ramene toute autre serie 
d'espacements a une seule espace classique (y compris les retours chariot), et va a la ligne 
quand c'est necessaire (quand le texte arrive en bout de largeur du bloc conteneur). 

On a done trois comportements distincts : la reduction des espacements, le respect des 
retours chariot d'origine et le passage a la ligne pour honorer la largeur du conteneur 
(wrapping). Void les definitions succinctes des valeurs possibles pour white-space ! 





Tableau B-14 


Valeurs de white-space 




Valeur 


Reduction 


Retours chariots 


Wrapping 


normal 


Oui 


Non 


Oui 


pre 


Non 


Oui 


Non 


nowrap 


Oui 


Non 


Non 


pre-wrap 


Non 


Oui 


Oui 


pre-line 


Oui 


Oui 


Oui 
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Proprietes des tableaux 



Tableau B-15 Proprietes des tableaux en CSS 2.1 



Propriete Description 


Border-collapse 


Gere la fusion des bordures entre cellules adjacentes, et entre les cellules et la bor- 
dure de la table. Desactivee par defaut (separate), peut etre activee avec la 
valeur col 1 apse. Je trouve ca beaucoup plus joli, personnellement... 


border-spacing 


Espacement entre bordures de cellules (si les bordures ne sont pas fusionnees). 
Peut contenir une ou deux tailles. Dans le second cas, distingue entre distances 
horizontal et verticale. 


caption-side 


Position du titre : au-dessus (top, defaut) ou au-dessous (bottom). 


empty-eel 1 s Affiche ou masque les cellules vides. Par defaut, affiche (show). On les masque 
avec hide. 


table-layout 


Mode de calcul des largeurs du tableau et des cellules. Le mode par defaut, auto, 
est celui auquel on s'attend : il adapte les largeurs en fonction des contenus de cel- 
lules. L'autre mode, f i xed, utilise uniquement les specifications de largeur pour le 
tableau, les colonnes, les bordures et I'espacement entre cellules. II est plus rapide 
mais rend generalement moins bien. 



Proprietes de I'interface utilisateur 



Propriete 



cursor 



Tableau B-16 Proprietes de I'interface utilisateur en CSS 2.1 

Description 

Determine le curseur souris a utiliser quand celui-ci survole I'element. Extremement 
utile en terme d'ergonomie. Les valeurs sont detaillees a la section 18.1 de la 
recommandation, mais je cite les principals : auto (defaut), default (curseur 
classique du systeme d'exploitation), poi nter (comme pour un lien), move (ideal 
pour glisser-deplacer), he! p (ideal pour abbr et acronym). 



outline 
-[color I style/ 
width] 



Affiche une delimitation autour d'un element. Differe d'une bordure en ce qu'elle 
n'occupe pas de place dans le modele des boites : elle est dessinee au-dessus du 
bord exterieur de la bordure. Elle ne comprend done pas les marges. Peut etre utile 
pour signaler qu'un element est pret a recevoir un depot lors d'un glisser-deplacer, 
mais encore mal pris en charge... 
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Pour aller plus loin... 

Livres 

CSS 2 — Pratique du design web 

Raphael Goetter 

Eyrolles, juin 2005, 324 pages (de bonheur) 

ISBN 2-212-11570-9 

he zen des CSS 

Dave Shea 

Eyrolles, novembre 2005, 296 pages 

ISBN 2-212-11699-3 

Cascading Style Sheets: The Definitive Guide 
Eric Meyer 

O'Reilly, novembre 2005, 508 pages 
ISBN 0-596-00525-3 

Memento CSS 

Raphael Goetter 

Eyrolles, novembre 2005, 14 pages (de memento) 

ISBN 2-212-11726-4 



Sites 



La recommandation CSS 2.1, evidemment. Attention, seule la version anglaise a 
valeur de reference : 

- http://www.w3.org/TR/CSS21/ 

— Version francaise de la 2.0 : http://www.yoyodesign.org/doc/w3c/css2/cover.html 
L'excellent site gere par Raphael Goetter (jetez-vous sur son livre !), Alsa 
Creations : http://www.alsacreations.com/ 

Le CSS Zen Garden, pour se convaincre qu'avec le meme XHTML, on peut 
changer completement de tete : http://csszengarden.com/ 
A List Apart brille aussi en CSS : http://alistapart.com/ 
Des styles decales, les frontieres de l'impossible : CSS Play 
http://moronicbajebus.com/playground/cssplay/ 

Roger Johansson a plein de choses a vous raconter sur CSS, si vous allez au 456 
Berea St. : http://www.456bereastreet.com/ 
CSS Beauty : http://www.cssbeauty.com/ 



c 

Le « plus » de I'expert : 
savoir lire une specification 



II existe trois categories de developpeurs web. D'abord ceux qui semblent toujours 
tout savoir, quitte a ne vous repondre que quelques instants plus tard, et expriment 
leur reponse avec un air d'autorite confiante dans l'exactitude de leurs propos, 
laquelle se verifie en effet a chaque fois. Ensuite ceux qui n'ont pas toutes les 
reponses, et semblent ne pas trop savoir ou les chercher. Enfin, ceux qui manifeste- 
ment n'ont qu'une competence empirique : leurs pages « tombent en marche ». 

Vous souhaitez evidemment ne pas faire partie de la derniere categorie, ni meme 
avoir a travailler avec de telles personnes. Vous connaissez probablement un certain 
nombre de developpeurs entrant dans la deuxieme categorie ; c'est peut-etre 
d'ailleurs votre cas. Quant a ceux de la premiere categorie, ces puits apparemment 
sans fond de connaissances, ils suscitent l'admiration de tous. Cette annexe vous pro- 
pose d'en faire partie. 
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Interets d'aller chercher ('information a la source 

II y a deux interets fondamentaux a etre capable d'aller chercher rinformation a la 
source. Le premier est parfaitement objectif et professionnel. Le second est plus sub- 
jectif et, comment dire... humain. 

Certitude et precision 

Les bonnes specifications ont plusieurs qualites. Intrinsequement d'abord, elles 
constituent le document de reference pour une technologie : elles font done autorite 
sur la question. Utiliser correctement la technologie revient a l'utiliser conformement 
a la specification. Si cela ne fonctionne pas alors que e'est exactement comme la spe- 
cification le demande, on sait que e'est notre environnement de travail qui est fautif 
et non notre code. 

Bien sur, cela peut simplement vouloir dire qu'on utilise du CSS 2.1 sur MSIE 6, 
auquel cas on ne peut pas laisser les choses telles quelles, il faudra trouver un com- 
promis. 

Une bonne specification est par ailleurs precise : elle doit indiquer tous les cas parti- 
culiers, toutes les nuances, tous les problemes potentiels. Elle ne doit pas laisser de 
zones d'ombres. Generalement, cela signifie que la specification est aride, ou en tout 
cas particulierement verbeuse. Les excellentes specifications arrivent a conjuguer pre- 
cision totale et lisibilite. 

Quiconque maitrise un sujet sur le bout des doigts le sait bien : il est tres agreable de 
discuter de quelque chose qu'on connait parfaitement ; en particulier s'il s'agit d'aider 
quelqu'un a comprendre, a utiliser, a mettre au point. L'expertise est agreable. Etre 
veritablement specialiste d'un domaine precis et mettre cette expertise en ceuvre est 
tres agreable. 

Savoir utiliser les specifications d'une technologie fournit ce que les moyens de 
deuxieme main (livres, didacticiels, articles, ateliers, etc.) ne peuvent que difficilement 
donner : faeces a une maitrise totale, ou a tout le moins faeces a l'information totale. 

« On m'a dit que la-dessus, e'est toi qui sais tout » : l'expertise 

II existe un deuxieme avantage, plus humain celui-la. A force de faire preuve d'exper- 
tise sur un sujet donne, vous allez etre connu pour cela. Un cercle toujours plus large 
de collegues et connaissances va faire l'association d'idee entre ce sujet et vous. Et de 
plus en plus, lorsqu'on aura besoin d'une information precise, pointue, fiable, on 
viendra vous voir. 



Le « plus » de I'expert : savoir lire une specification 

Annexe C 

Etre un expert en XHTML, en balisage semantique, en accessibilite, en CSS 2.1, en 
DOM niveau 2, en JavaScript et en AJAX ne vous apportera pas fortune et gloire 
(quoique...), mais dans votre travail, cela risque fort de vous apporter autre chose : 

Vous allez devenir indispensable. 

Rien que pour l'ego, c'est agreable. Mais cela peut aussi affecter vos pretentions sala- 
riales, embellir votre CV et vous ouvrir de nouvelles opportunites. 



Les principaux formats de specifications web 

Dans le cadre des technologies web, les specifications utilisent essentiellement quatre 
formats. 

Les recommandations du W3C 

Les technologies gerees par le W3C sont publiees sous formes de recommandations. 
On trouve deux abreviations courantes : TR (Technical Report) et REC (Recommen- 
dation). II s'agit du statut finalise d'une specification, qui passe auparavant par plu- 
sieurs stades WD (Working Draft, ou ebauches). 

La plupart des « langages descriptifs » du Web sont des technologies W3C. Citons 
principalement (X)HTML, XML, CSS, DOM, MathML, RDF, SMIL, SOAP, 
SVG, XPath et XSL/XSLT. 

Les grammaires formelles de langages a balises : DTD et schemas XML 

Les langages a balises disposent d'une grammaire formelle, tees pratique pour retrouver 
rapidement le detail des attributs et elements autorises dans un contexte precis. 

Suivant le cas (principalement l'origine et l'anciennete du langage vise), la grammaire 
utilise soit une DTD (Document Type Definition), qui est un document SGML de 
syntaxe assez facile, soit un schema XML, un document... XML, potentiellement 
plus puissant mais souvent tees, tees verbeux. 

Par exemple, HTML et XHTML 1.0 utilisent des DTD, tandis que XHTML 1.1+, 
WSDL et XLink utilisent des schemas XML. 

II est a noter qu'un juste milieu existe au travers de la syntaxe Relax NG Bien que 
celle-ci gagne chaque jour en popularite, elle n'est pas encore adoptee par les princi- 
paux organismes de standardisation, notamment le W3C. 
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Les RFC de I'lETF : protocoles et formats d'lnternet 

Enfin, la plupart des protocoles et formats de donnees du Web sont geres et norma- 
lises par I'lETF (Internet Engineering Task Force), un tres large groupement de profes- 
sionnels qui est, veritablement, a l'origine d'lnternet (premiers standards en 1969 !). 

Les standards de I'lETF sont collectivement appeles les RFC (Request For Com- 
ments), et utilisent un format texte en 72 colonnes, tres simple a lire. II en existe plus 
de 4 600, dont plus de 300 rien qu'entre Janvier et aout 2006. 

On y trouve notamment les specifications pour HTTP, SMTP, POP, IMAP, FTP, 
Telnet, ICMP (la commande ping), SSL... 



S'y retrouver dans une recommandation W3C 

Commencons par explorer la structure d'une recommandation W3C. Le site officiel 
du W3C est http://w3.org. Vous y trouverez toutes les specifications dans leur version 
anglaise, seule a etre garantie : des traductions existent souvent, mais leur qualite 
n'est pas validee en detail par le W3C, meme s'ils lient sur ces traductions depuis la 
version originale. 

URL et raccourcis 

Les recommandations ont souvent une URL assez longue, car elle contient quelques 
repertoires et surtout un horodatage de version. Void quelques exemples, qui don- 
nent une idee des degats : 

• http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001 1 1 3/ 

• http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/ 

• http://www.w3.org/TR/2002/CR-css-mobile-20020725 

• http://www.w3.org/TR/2001/REC-xhtml11-20010531/ 

• http://www.w3.org/TR/2003/REC-SVG11-20030114/ 

• http://www.w3.Org/TR/1 999/REC-xpath-1 9991 1 1 6 

Vous y observez le prefixe /TR/ en debut de chemin, comme pour toutes les recom- 
mandations. On a ensuite l'annee de parution, puis le chemin des documents de la 
specification, qui demarre generalement par REC (on a ici aussi CR, pour Candidate 
Recommendation, dernier stade avant finalisation. On peut aussi trouver WD : Working 
Draft, ou NOTE, pour les documents a valeur informative). 

Les chemins des specifications precisent toujours la date exacte de parution du docu- 
ment a la fin, au format aaaammj j. On peut done deduire, par exemple, que la der- 



Le « plus » de I'expert : savoir lire une specification 

Annexe C 

niere version du DOM niveau 2 HTML date du 19 Janvier 2003, alors que celle du 
DOM niveau 2 noyau date du 13 novembre 2000. 

Pour de nombreuses specifications, il existe toutefois une URL « raccourcie », qui 
amene automatiquement a la derniere version. Void les equivalents des URL men- 
tionnees plus haut, avec quelques autres : 

• http://www.w3.org/TR/html401/ 

• http://www.w3.org/TR/xhtml1/ 

• http://www.w3.org/TR/CSS21/ 

• http://www.w3.org/TR/DOM-Level-2-Core/ 

• http://www.w3.org/TR/DOM-Level-2-HTML/ 

• http://www.w3.org/TR/css-mobile 

• http://www.w3.org/TR/xhtml11/ 

• http://www.w3.org/TR/SVG11/ 

• http://www.w3.org/TR/xpath 

En fait, cela revient le plus souvent a supprimer l'annee, le prefixe REC et l'horodatage 
en fin de nom. Notez qu'il y a parfois des slashes (/) terminaux, et parfois non. Dans 
certains cas (HTML 4.01, XHTML 1.0, CSS 2.1...) cela n'a aucune importance, 
dans d'autres vous obtiendrez une page intermediate. 

Structure generate d'une recommandation 

Une recommandation W3C a toujours la meme structure generate. 
D'abord l'en-tete : 

1 titre avec version ; 

2 statut (recommandation, ebauche...) et date de publication ; 

3 liste de liens vers les formats disponibles (texte, HTML, PDF...) ; 

4 liens vers la derniere version et la version precedente ; 

5 liste des editeurs, c'est-a-dire des responsables de la specification. 

La figure C-l illustre l'en-tete de la recommandation DOM niveau 2 HTML. 

Comme vous le voyez, la structure n'est pas toujours exactement identique a celle 
decrite plus haut, mais on retrouve tres vite ses reperes : ici, les formats sont simple- 
ment listes apres la liste des editeurs. Le lien sur les traductions, qui figure souvent 
apres la partie introductive, est ici en fin d'en-tete. Mais a part 9a, on reste dans le 
moule. Par contraste, observez l'en-tete de la recommandation pour HTML 4.01, qui 
correspond a l'ancienne facon de faire, et reprend exactement notre liste (figure C-2). 
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II a meme une particularite, qui est de proposer les versions a jour et precedentes 
pour les variantes 4 et 4.01. Notez aussi que la liste des formats etait bien moins 
lisible que la forme adoptee plus recemment. 

On trouve ensuite la partie introductive, qui fournit : 

1 \labstract, qui decrit rapidement le role de la technologie specifiee. 

2 Le statut du document, qui contient toujours un texte plus ou moins pro forma sur 
le statut (recommandation, ebauche, etc.), l'etat non normatif s'il s'agit d'une tra- 
duction, et fournit la liste des traductions connues (ou en tout cas un lien dessus, 
chercher le lien translations dans le corps du texte faute d'une section Available 
languages) ainsi qu'un lien vers les corrections ulterieures a la publication (errata). 

3 La table des matieres. 

Suivant la specification, on a alors plusieurs possibilites : 

• Toute la specification est sur la meme page, le meme document (cas de 
XHTML 1.0 ou XPath, par exemple). 

• Seule la table des matieres y figure et chaque section a une page dediee (c'est le 
cas par exemple de HTML 4.01, XHTML 1.1 et CSS 2.1). 

• La table des matieres presentee ne garde que les parties incontournables (table des 
matieres justement, copyright, annexes classiques, glossaire, references, index) et 
une seule section (deux tout au plus) qui constitue le cceur du sujet, mais figure 
dans un sous-document (cas quasi systematique dans les specifications du DOM, 
voir figure C-3). 

On reconnait vite la nature du document, rien qua la taille du curseur dans la barre 
de defilement verticale : s'il est tres petit, il est probable qu'on a toute la specification 
sur une seule page ! 
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Specifications DOM : 
une table des matieres 
courte et un sous-document 
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Le format premier d'une recommandation est le HTML. Les documents utilisent 
done abondamment les hyperliens, ce qui rend leur consultation plus pratique. Tou- 
tefois, la simple taille des recommandations fait qu'on s'y perd facilement. Pour s'y 
retrouver, on a deux moyens. Si la specification ne comporte que quelques pages 
(voire une seule), la recherche interne au navigateur doit permettre de s'y retrouver 
rapidement. On 1' active generalement avec Ctrl+F. 

Pour des specifications plus distribuees, comportant de nombreuses pages, il est bon 
de regarder si la recommandation fournit effectivement un index, qui figure genera- 
lement tout en bas de la table des matieres. Chaque terme important (notamment 
tous les noms d'elements, de proprietes, de methodes, d'interfaces, etc.) fait l'objet 
d'un lien ; en cas de liens multiples, le premier porte le nom de l'element et les sui- 
vants des numeros. 
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Astuce utile lorsqu'on cherche a determiner si un aspect precis appartient a une version 
donnee ou a la precedente (ou simplement pour examiner rapidement en quoi la nou- 
velle version differe) : chaque recommandation dispose en annexes (et meme dans les 
toutes premieres annexes) d'une liste des changements. Suivant la taille de la recom- 
mandation, cette annexe est elle-meme plus ou moins structuree. Ainsi, les change- 
ments pour CSS 2.1 (en realite pour CSS 2.0 et2.1) sont impressionnants (figure C-5). 

En revanche, dans le DOM niveau 2 HTML, on est plus sobre : une simple entree 
comme annexe A, nommee Changes. II faut dire que le document detaillant les chan- 
gements depuis DOM niveau 1 pour les elements relatifs a HTML occupe a peine 
deux ecrans de haut. 
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Figure C-5 
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Recours a des syntaxes formelles 

Suivant ses besoins, une recommandation W3C va s'appuyer sur des syntaxes for- 
melles adaptees pour decrire des aspects techniques. Les principales syntaxes 
employees sont : 

• DTD pour les elements de balisage jusqu'a XHTML 1.0 Strict. 

• Schema XML a partir de XHTML 1.1. 

• IDL {Interface Description Language) pour les interfaces (essentiellement dans le 
cadre du DOM). 

• EBNF {Extended Backus-Naur Form), Lex ou Yacc pour le reste. 

En raison de leur frequence, nous etudierons plus en detail DTD et schema XML 
dans les sections qui suivront. 

IDL est tres facile a lire, car elle ressemble a une declaration de classe abstraite ou 
d'interface dans les principaux langages objets. C'est parfois aussi simple que dans le 
code suivant. 



Listing C-l Declaration IDL de I'interface HTMLEIement (DOM niveau 2 HTML) 



interface HTMLEIement : Element { 




attribute DOMString 


id; 


attribute DOMString 


title; 


attribute DOMString 


Tang; 


attribute DOMString 


di r; 


attribute DOMString 

}; 


className; 
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C'est parfois un peu plus complique, mais 9a reste facilement lisible. 
Listing C-2 Declaration IDL de I'interface HTMLSelectElement 

interface HTMLSelectElement : HTMLElement { 



readonly attribute DOMString 
attribute long 
attribute DOMString 

// Modified in DOM Level 2: 

attribute unsigned long 



type; 

selectedlndex; 

value; 

length; 



// raises(DOMException) on setting 



readonly attribute 

// Modified in DOM 

readonly attribute 

attribute 

attribute 

attribute 

attribute 

attribute 

void 



void 
void 
void 



HTMLFormElement form; 
Level 2 : 

HTMLOptionsCollection options ; 
boolean disabled; 

boolean multiple; 

DOMString name; 

long size; 

long tablndex; 

add(in HTMLElement element, 
in HTMLElement before) 
raises(DOMException) ; 
remove(in long index); 
blurO; 
focusQ ; 



}; 



Quant a EBNF, il s'agit d'une des plus anciennes syntaxes textuelles de description 
de grammaire. Vous trouverez quelques explications sur cette syntaxe, plutot simple, 
aux deux URL suivantes : 

• http://developpeur.journaldunet.com/tutoriel/theo/050831-notation-bnf-ebnf.shtml 

• http://fr.wikipedia.org/wiki/EBNF 

Certaines specifications utilisent des descriptions plus basees sur les syntaxes Lex (ou 
Flex) et Yacc (ou Bison), bien connues des developpeurs C. Ce n'est pas tres eloigne 
d'EBNF. Void un exemple tire de la recommandation CSS 2.1, qui repose lui-meme 
sur quelques definitions mentionnees plus haut dans le document. 

Listing C-3 Definition Lex de syntaxe generale pour une feuille de styles CSS 



stylesheet 

statement 

at-rule 

block 

ruleset 



[ CDO I CDC I S I statement ]*; 
ruleset | at-rule; 

ATKEYWORD S* any- [ block | ';' S* ] ; 
'{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*; 
selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*; 
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selector : any+; 

declaration : DELIM? property S* ':' S* value; 

property : IDENT; 

value : [ any | block | ATKEYWORD S* ]+; 

any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING 

| DELIM | URI | HASH | UNICODE-RANGE | INCLUDES 
| DASHMATCH | FUNCTION S* any* ')' 
I '(' S* any* ')' | '[' S* any* ']' ] S*; 

II faut bien comprendre que, l'immense majorite du temps, des descriptions EBNF, 
Lex ou Yacc visent plus les developpeurs de logiciels implementant la technologie 
que ceux qui utilisent cette meme technologie. Le texte environnant fournit genera- 
lement tous les details necessaires pour votre utilisation. 



Les descriptions de proprietes CSS 

La section Dechiffrer une DTD, plus loin dans cette annexe, montrera comment lire 
et exploiter les fragments de DTD employes pour decrire les langages a balises, par 
exemple HTML. Avant d'en finir avec les recommandations W3C, je voudrais tout 
de meme donner quelques informations supplementaires sur deux formats tres con- 
suites dans la pratique : celui decrivant les proprietes CSS, et celui decrivant les pro- 
prietes et methodes du DOM. 

Commencons done par les proprietes CSS. Dans un souci de reference, nous utilise- 
rons la version originale, en anglais. Prenons par exemple la description de la pro- 
priete white-space, dans la section Text. La specification utilise la representation 
suivante pour decrire la propriete : 



'white-space' 




Value: 


normal | pre | nowrap | pre-wrap | pre-line | inherit 


Initial: 


normal 


Applies to: 


all elements 


Inherited: 


yes 


Percentages: 


N/A 


Media: 


visual 


Computed values: 


as specified 



1 Value, detaille la liste des valeurs possibles, separees par des pipes ( I ), symbole fre- 
quent pour indiquer une alternative. Les valeurs exprimees sont normatives et la 
casse est parfois significative. On a ici 6 valeurs possibles, dont l'incontournable 
inherit pour une propriete heritable. 
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2 Initial decrit la valeur par defaut, none s'il n'y en a aucune. 

3 Applies to decrit les categories d'elements qui disposent de cette propriete. Ici elle 
s'applique a tous, mais des valeurs courantes sont block-level elements, inline elements, 
etc. II s'agit des categories determinees par le modele visuel CSS, evoque a l'annexe B. 

4 Inherited indique si la propriete est heritable ou pas ; une propriete heritable 
prend sa valeur par defaut dans la valeur pour son element conteneur : c'est dans 
le principe de la cascade. Toutes les proprietes ne sont pas heritables (par exem- 
ple, text-decoration ne Test pas). 

5 Percentages est utile quand les valeurs possibles incluent une notation en pourcen- 
tage. C'est principalement le cas des tailles (de boite ou de police de caracteres). 
Cette valeur indique alors a quoi se referent les pourcentages (par exemple, la lar- 
geur du bloc conteneur). 

6 Media indique le ou les media CSS pour lesquels la propriete a du sens. Ici on est 
sur visual, ce qui couvre tousles media visuels : screen, print, projection, etc., 
tout en excluant les media comme aural (lecteurs d'ecran) par exemple. 

7 Computed values, enfin, precise les ajustements a apporter a la valeur en fonction 
du contexte. C'est parfois simple et done indique a la volee. Quand c'est plus 
complexe, on a generalement as specified, et les details dans le texte qui suit. Par 
exemple, la propriete text-align varie en valeur suivant ce que vaut la propriete 
white-space. 

Les descriptions de proprietes et methodes DOM 

Autre format frequemment consulte, les proprietes et methodes DOM. On a deja 
illustre le code IDL utilise pour representor une interface DOM complete, mais ces 
fragments de code sont suivis d'explications plus detaillees, bien entendu. Une inter- 
face DOM est toujours specifiee en plusieurs temps : 

1 le code IDL de l'interface ; 

2 les descriptions des attributs eventuels ; 

3 les descriptions des methodes eventuelles. 

Le code IDL fournit quelques informations precieuses. D'abord, au niveau de la 
declaration de l'interface elle-meme, si celle-ci etend une autre interface, on le voit 
immediatement. Quelques exemples : 

interface HTMLDocument : Document { 
interface HTMLElement : Element { 
interface HTMLImageElement : HTMLElement { 
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On voit immediatement qu'un element img, qui expose naturellement l'interface 
HTMLImageElement, expose done aussi l'interface HTMLElement, et done Element, et 
done Node. II fournit done de nombreuses proprietes et methodes ! 

Par ailleurs, le code IDL fournit une vue globale sur les types des proprietes et ceux 
des methodes (types de retour, types des arguments). Qyelques exemples la aussi, au 
travers du code IDL de HTMLOptionsCollection, reformate : 

// Introduced in DOM Level 2: 
interface HTMLOptionsCollection { 

attribute unsigned long length; 
// raises(DOMException) on setting 

Node item(in unsigned long index); 

Node namedltem(in DOMString name); 

}; 

Que trouve-t-on ici ? D'abord, les attribute sont reconnaissables a ce qu'ils sont pre- 
fixes par attribute, et n'ont pas de parentheses apres leur nom. Le mot reserve 
attribute est parfois precede de readonly., ce qui est tres important: cela signifie 
qu'il est en lecture seule. Toute tentative d'ecriture generera sans doute une exception. 

Entre attribute et le nom de l'attribut, on a le type. IDL utilise des types primitifs 
issus du C, et des types objets qui sont soit d'autres interfaces du DOM, soit des 
types classiques definis par le DOM noyau. 

Les methodes n'ont pas attri bute au debut, mais un type de retour, un nom, et des 
parentheses entre lesquelles on peut lister des parametres, avec leur sens, leur type et 
leur nom. Toutes ces informations sont precieuses, mais le sens est generalement i n 
et peut etre ignore. II signifie simplement que la methode utilise 1' argument sans le 
modifier : e'est un parametre local, passe par valeur, si vous preferez. 

Void une liste des principaux types utilises dans 1'IDL des specifications DOM. 
Tableau C-1 Principaux types utilises dans I'lDL du DOM 





[unsigned] short Nombreentier 16 bits. Soitsigne (-32 768 a 32 767), soitnon signe(0a65 535). 


[unsigned] long 


Nombre entier 32 bits. Meme remarque pour le signe. C'est le type numerique 
le plus courant. 


boolean 


Valeur booleenne : false ou true. 


void 


Aucune valeur. Type de retour des methodes ne renvoyant rien. 


DOMString 


ChaTne de caracteres Unicode (16-bit). 


DOMTi meStamp 


Nombre entier positif 64 bits representant un nombre de millisecondes depuis 
le debut de I'ere (1 er Janvier 1 970 00:00:00 GMT). De nombreux langages 
represented ainsi les moments. 
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Tableau C-1 Principaux types utilises dans I'lDL du DOM (suite) 

Description 

DOMExcepti on Le type standard des exceptions levees par les methodes. Contient simplement 

une propriete numerique entiere nommee code, qui vaut I'une des constantes 
xxx_ERR decrites dans les recommandations du DOM. 



Interface DOM (ex. Node) Eh bien, I'interface en question... Reportez-vous a sa definition ! 



Les valeurs numeriques signees sont assez rares : on utilise principalement unsigned 
long. 

Apres le code IDL, on trouve une section Attributes s'il y a des attributs, et une sec- 
tion Methods... s'il y a des methodes. 

Une section d'attribut reprend son nom, son type et son eventuelle contrainte de lec- 
ture seule. Un texte decrit l'attribut plus en detail, et si celui-ci a des contraintes pour 
son ecriture, un paragraphe particulier precise l'information Exception on setting qui 
figurait deja, normalement, en commentaire dans le code IDL. 

Une section de methode reprend son nom, puis decrit la methode plus en detail avec 
un texte explicatif. Ce texte est obligatoirement suivi de trois sections : les parame- 
tres, la valeur de retour, et les exceptions potentielles. Les methodes simplissimes se 
retrouvent done avec trois embryons de sections. Ce qui donne par exemple : 

close 

Closes a document stream opened by openO and forces rendering. 
No Parameters 
No Return Value 
No Exceptions 

Ces sections fournissent souvent le petit detail qui explique pourquoi votre appel 
produit une erreur, ou ne donne rien, ou encore engendre un avertissement. Bien les 
lire est precieux. 

Quand vous utilisez pour la premiere fois une interface DOM, lisez sa documenta- 
tion complete. Ne vous contentez pas de quelques bouts qui semblent repondre a vos 
questions immediates. Prenez quelques minutes de plus pour lire l'ensemble, cela 
vous economisera souvent bien des heures de debogage par la suite. 



Dechiffrer une DTD 

La DTD {Document Type Definition) constitue le premier format historique de gram- 
maire pour les langages a balises. Une DTD est redigee en SGML {Standard Generalized 
Markup Language), langage dont le HTML est en quelque sorte un sous-ensemble. 
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Si vous redigez correctement vos pages web, vous faites reference a une DTD tout au 
debut de votre document, a l'aide d'une instruction DOCTYPE. Par exemple, la pre- 
miere ligne de votre page web dit normalement : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http : //www. w3 . org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 

Comment 9a, « non » ?! Mais c'est mal ! Vous ne faites pas du XHTML 1.0 Strict ? 
Vous n'avez pas honte ? Allez done relire l'annexe A et faites penitence. 

Declarer explicitement sa DTD de reference dans une page web a un double avan- 
tage. D'une part, cela permet d'utiliser un validateur HTML correctement : celui-ci 
pourra detecter votre grammaire au lieu d'essayer de la deviner, et vous assurera ainsi 
une verification de grammaire appropriee. D'autre part, declarer une DTD stricte 
(quelle soit HTML 4.01 ou XHTML 1.0) permet a votre navigateur de passer en 
mode « respect des standards », notamment en ce qui concerne les CSS. Pour plus de 
details, cherchez done la phrase doctype switching sur Google. 

Mais revenons a nos DTD dans le cadre de specifications. Une DTD constitue une 
specification formelle pour un langage a balises (par exemple, HTML 4.01). Elle 
n'explique pas le sens des balises ou des attributs, mais decrit quelles balises et quels 
attributs sont disponibles, ou et quand. 

Les specifications HTML et apparentees ont pris l'habitude, au debut de chaque 
section decrivant un element, de presenter le fragment correspondant de la DTD. 
Observez par exemple la specification de HTML 4.01 (sur laquelle repose 
XHTML 1.0, ne l'oubliez pas) pour l'element form. 

Listing C-4 Le fragment de la DTD HTML 4.01 pour form 

<!ELEMENT FORM - - (%block; | SCRIPT)+ -(FORM) -- interactive form --> 

<!ATTLIST FORM 

%attrs; -- %coreattrs, %il8n, %events -- 

action %URI; #REQUIRED -- server-side form handler -- 

method (GET|P0ST) GET -- HTTP method used to submit the form -- 

enctype %ContentType; "application/x-www-form-urlencoded" 

accept %ContentTypes; #IMPLIED -- list of MIME types for file upload -- 

name CDATA #IMPLIED -- name of form for scripting -- 

onsubmit %Script; #IMPLIED -- the form was submitted -- 

onreset %Script; #IMPLIED -- the form was reset -- 

accept-charset %Charsets; #IMPLIED -- list of supported charsets -- 
> 
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On a ici la description de l'element form lui-meme, avec son nom et la description de 
son contenu. Vous remarquez sans doute qu'ici, les noms d'elements sont en majus- 
cules, « a l'ancienne ». C'etait la norme du temps de HTML (au siecle dernier, 
done), mais depuis que XHTML est arrive, on est sensible a la casse et les nouvelles 
normes officialisent la casse minuscule. 

Les recommandations suivent d'ailleurs les pratiques de leur temps : meme s'il est 
aujourd'hui communement admis que XHTML est incontournable, et qu'il faut 
done respecter les regies de fermeture de balises, de valeurs d'attributs entre guille- 
mets, et de balises en minuscules, la recommandation HTML foisonne toujours 
d'exemples « d'epoque », pour ainsi dire, ou beaucoup d'elements ne sont pas fermes, 
sont en majuscules et n'encadrent pas leurs valeurs d'attributs ! 

Detaillons rapidement la syntaxe de notre fragment. On a d'abord : 

I <!ELEMENT FORM - - (%b"lock; | SCRIPT)+ -(FORM) - - interactive form --> 

Le debut, <! ELEMENT, indique qu'on definit un element. Le nom suit : FORM. 

Apres les deux tirets separes, on trouve une description du modele de contenu : 
(%b"lock; |SCRIPT)+ -(FORM). On peut traduire ce modele comme ceci : « soit le 
modele block, soit l'element SCRIPT, le tout autant de fois qu'on veut (mais au moins 
une fois), en revanche, pas d'element FORM imbrique ». 

En effet, %b"lock est ce qu'on appelle une reference d'entite, sur laquelle il est 
d'ailleurs possible de cliquer dans la recommandation. La definition de l'entite 
%b"lock la decrit comme pouvant etre realisee par un certain nombre de balises con- 
nues, dont par exemple P, HI, UL, PRE, DIV, mais aussi FORM, ce qui amene justement 
l'exclusion explicite dans notre definition d'element FORM. 

La derniere partie, -- i interactive form --, constitue un commentaire de fin de defi- 
nition, qui nous signale que l'element FORM permet de realiser un formulaire utilisateur. 

Passons maintenant a la liste des attributs pour l'element FORM. Classiquement, elle 
figure dans la DTD juste apres la definition de l'element lui-meme. J'ai retire les ali- 
gnements entre les champs pour ameliorer la lisibilite individuelle des extraits. La 
liste des attributs debute par : 

<!ATTLIST FORM 

%attrs; -- %coreattrs, %il8n, %events -- 

On declare ici une definition d'attributs pour l'element FORM. Les premiers attributs 
sont references par l'entite %attrs, dont le commentaire nous apprend quelle repre- 
sente une combinaison des entites %coreattrs, %i 18n et %events. 
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Ces entites regroupent les attributs dits noyau (i d, cl ass, sty! e et ti tl e), ceux rela- 
tifs a la gestion des langues (lang et di r) et ceux relatifs aux evenements JavaScript 
(par exemple onclick). Vbus n'utiliserez bien entendu jamais ces derniers, puisque 
vous faites de Y unobstrusive JavaScript, n'est-ce pas ? 

Que dit la suite ? 

action %URI; #REQUIRED -- server-side form handler -- 

On a la un attribut action, dont le modele de contenu est reference par l'entite %URI 
(laquelle, idealement, devrait decrire la syntaxe d'un URI, mais la syntaxe DTD etant 
pauvre, elle se contente, faute de mieux, de dire simplement « texte quelconque »...). 
On precise aussi que cet attribut est obligatoire (et je me suis rendu coupable 
d'enfreindre cette regie dans certains exemples JavaScript de ce livre, je l'avoue...). 

Deux autres exemples interessants de definition d'attributs : 

method (CET|POST) CET -- HTTP method used to... -- 

name CDATA #IMPLIED -- name of form for scripting -- 

On a ici une autre forme de modele de contenu, qui dit en substance : « 1' attribut 
method peut valoir GET ou POST, mais pas autre chose » (ce qui embete tant aujourd'hui 
les partisans d'une approche REST pour les API web). On voit aussi une valeur par 
defaut au lieu de #REQUIRED : si la methode n'est pas precisee, elle vaudra CET. 

La definition de l'attribut name indique qu'il s'agit d'un texte quelconque (type spe- 
cial CDATA, pour character data), et qu'il est optionnel sans valeur par defaut 
(#IMPLIED). 

Voila pour une introduction suffisante. Astuce interessante : la specification 
HTML 4.01 a juge bon de fournir une presentation plutot detaillee des syntaxes 
DTD utilisees, et cela directement dans la recommandation ! Void l'adresse de la 
version francaise afin de vous faciliter le plus possible l'acquisition : http://www. 
Ia-grange.net/w3c/html4.01 /intro/sgmltut.html#h-3. 3. Si cela ne suffit pas, vous avezune 
introduction generique assez bien faite qui pourra peut-etre mieux vous satisfaire sur 
http://www.w3schools.com/dtd/default.asp. 

J'ai dit tout a l'heure que la DTD precisait quelles balises et quels attributs etaient dis- 
ponibles, ou et quand. Dit comme cela, on a l'impression que toute l'information peut 
etre transmise, et que le corps du texte de la recommandation n'est la que pour pre- 
ciser le sens des elements et des balises et ajouter quelques informations de contexte. 

En realite, une DTD n'est pas tres precise. La syntaxe disponible ne permet pas de 
preciser de nombreux cas de figure courants, qu'il faut alors decrire dans le corps du 
texte. On ne peut pas formuler certaines regies simples, par exemple indiquer qu'un 
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element A peut avoir au maximum 5 elements fils B, sans meme parler d'indiquer 
une fourchette 2-5. 

On ne peut pas non plus exprimer des exclusions entre les attributs, ou indiquer que 
si tel attribut est present, tel autre doit l'etre aussi. On ne peut egalement pas indi- 
quer que les valeurs de tel attribut, toutes balises comprises, doivent etre uniques 
dans le document (cas flagrant, par exemple en HTML : l'attribut id). Bref, les 
DTD sont limitees. 

C'est pourquoi on est passe a une autre syntaxe. Helas, on a alors pousse jusqu'a 
1' extreme inverse : pour pouvoir tout decrire, on a cree une syntaxe si verbeuse, que la 
plupart des cas simples prennent de nombreuses lignes a representer. Ce sont les 
schemas XML. 



Naviguer dans un schema XML 

Les schemas XML ont pris la releve des DTD pour decrire formellement les possibi- 
lity de combinaison et d'inclusion d'elements et d'attributs dans les langages a balises. 
Et quand on sait combien le W3C s'est epris des technologies XML (plus de vingt a 
ce jour, de XML lui-meme a XSLT, de XPath a XML Query, de SVG a MathML...), 
on imagine facilement quel usage intensif est aujourd'hui fait des schemas XML. 

Un schema XML est lui-meme un document XML. La syntaxe a ete concue pour 
couvrir tous les besoins imaginables. Et comme souvent dans de tels cas, elle aboutit 
a quelque chose de tres epais pour les cas simples... 

Prenons par exemple un fragment du schema pour XHTML 1.1 Strict. 
Listing C-5 Le schema XML de I'element form en XHTML 1.1 

<xs:attributeCroup name=" xhtml . form.attlist"> 

<xs:attributeCroup ref="xhtml . Common. attrib"/> 
<xs: attribute name="action" type="xhlld: URI" use="requi red"/> 
<xs:attribute name="method" default="get"> 
<xs: simpleType> 

<xs: restriction base="xs:NMTOKEN"> 
<xs : enumeration value="get"/> 
<xs : enumerati on val ue="post"/> 
</xs : restriction> 
</xs : si mpl eType> 
</xs:attribute> 
<xs: attribute name="enctype" type="xhlld:ContentType" 

default="application/x-www-form-urlencoded"/> 
<xs : attri bute name="accept-charset" type="xhlld : Charsets"/> 
<xs: attribute name="accept" type="xhlld:ContentTypes"/> 
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</xs : attri buteCroup> 
<xs: group name="xhtml .form.content"> 
<xs:sequence> 

<xs: choice maxOccurs="unbounded"> 
<xs:group ref="xhtml .BlkNoForm.mix"/> 

<xs: element name="fieldset" type="xhtm"l .fieldset. type"/> 
</xs :choice> 
</xs: sequence> 
</xs :group> 

<xs: complexType name="xhtml .form. type"> 
<xs: group ref="xhtml .form. content"/> 
<xs: attri buteGroup ref="xhtml .form.att"list"/> 
</xs : compl exType> 

A qui aurait le front de s'insurger que « c'est illisible ! », « c'est n'importe quoi ! », ou 
encore « beaucoup de bruit pour rien ! », je repondrais d'un air affable « vous avez 
bien raison ». 

Seulement voila, le W3C s'est amourache des schemas XML et il n'est pas le seul, 
loin de la ! L'univers J2EE par exemple a bascule des DTD vers les schemas autour 
de l'apparition des Senders 2.4 et de JSP 2.0, il y a deja longtemps. 

Parmi les concepts cles d'un schema XML, il faut retenir qu'on definit le plus sou- 
vent separement un type (une grappe d'elements et de balises) et les noms des ele- 
ments qui reposent sur ces types (ce qui permet, il est vrai, une certaine factorisation, 
fort agreable). Les structures simples sont declarees a l'aide de balises 
<xs:simpleType>, et les types complexes (en realite, presque tous) au moyen de 
<xs : compl exType>. 

La notion de groupes, qui permet d'exprimer une exclusivite d'elements ou d'attri- 
buts, ou de decrire des dependances, est representee par <xs:group> pour les ele- 
ments et <xs: attri buteCroup> pour les attributs. Les elements et attributs sont 
nommes respectivement avec <xs:element> et <xs: attri bute>, les contraintes 
exprimees soit avec des attributs d'occurrence (minOccurs et maxOccurs), soit avec 
l'attribut use, ou encore avec des descriptions complexes <xs : restrictions Le frag- 
ment presente en listing C-5 est sympathique, parce qu'il illustre au moins un cas 
possible pour presque toutes ces syntaxes. 

II me faudrait un ouvrage entier pour vous presenter toutes les possibilites, mais si le 
sujet vous interesse, vous trouverez une presentation assez detaillee et bien faite, pas a 
pas, sur http://www.w3schools.com/schema/schema_intro.asp. 

Pour terminer, sachez qu'une syntaxe alternative fait de plus en plus d'aficionados, 
car tout en etant basee elle aussi sur XML, et bien que permettant d'exprimer tout ce 
qui est exprimable en schemas XML, elle est incomparablement plus simple et 
lisible. II s'agit de Relax NG (nouvelle generation). 
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Relax NG est suffisamment populaire pour que la plupart des bibliotheques de trai- 
tement de grammaires XML la prennent aujourd'hui en charge (qu'on travaille en 
Java, C#, Delphi ou Ruby...). Toutefois, elle n'a pas encore su gagner les cceurs des 
grands organismes de standardisation. Pourvous faire une idee, consacrez done quel- 
ques minutes a ce didacticiel sur le site officiel, qui permet de bien cerner la 
question : http://relaxng.org/tutorial-20011203.html. A titre de teaser, voici l'equivalent 
Relax NG du listing C-5. 

Listing C-6 La specification Relax NG de I'element form en XHTML 1.1 



<define name="form"> 
<element name="form"> 

<ref name="form.att"list"/> 
<oneOrMore> 

<ref name="B"lock. class"/> 
</oneOrMore> 
</element> 
</define> 

<define name="form.att1ist"> 
<ref name="Common.attrib"/> 
<attribute name="action"> 

<ref name="URI.datatype"/> 
</attribute> 
<optiona"l> 

<attribute name="method"> 
<choice> 

<val ue>get</val ue> 
<val ue>post</val ue> 
</choice> 
</attribute> 
</optiona"l> 
<optiona"l> 

<attribute name="enctype"> 

<ref name="ContentType . datatype"/> 
</attribute> 
</optiona"l> 
</def i ne 



Ayant cible l'exemple, on ne voit pas une immense difference de taille (28 lignes dans 
les deux cas), mais sentez-vous combien la seconde version est plus lisible que la 
premiere ? 
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Parcourir une RFC 



Une RFC (Request For Comments) est un standard Internet elabore par 1'IETF 
(Internet Engineering Task Force). Je dis bien « Internet » et non « Web », car alors 
que le Web a vu le jour en 1992 avec la premiere page HTML, sous la houlette de 
Tim Berners-Lee, Internet existe lui depuis 1969 (meme s'il s'appelait alors 
ARPANET). 

Ce sont aujourd'hui des centaines de protocoles et de formats qui font fonctionner ce 
reseau mondial. Le grand public connait les plus visibles : HTTP, POP, IMAP, 
SMTP, SSL, TLS, FTP... Ceux qui pretent attention aux details de leurs clients de 
messagerie connaissent peut-etre aussi MIME. II faut sans doute etre dans l'infor- 
matique pour en connaitre d'autres, comme SNMP, NTP, SSH, Telnet, RSTP et 
bien d'autres, sans parler des formats, de CSV a Atom. 

Au total, ce sont plus de 4 600 documents standardises qui ont deja ete emis, et avec 
environ 500 documents par an ces derniers temps, le phenomene ne fait qu'accelerer. 

Format general d'une RFC 

Le format d'une RFC a toutefois perdure a travers les ages et trahit aujourd'hui ses 
origines tres modestes, a une epoque ou les imprimantes matricielles 8 points etaient 
le dernier cri, et ou la notion meme de reseaux d'ordinateurs n'etait encore qu'une 
vision pleine d'espoir. 

Le format principal d'une RFC est un fichier texte utilisant le jeu de caracteres US- 
ASCII sur 7 bits (pas d'accents, pas de signes diacritiques, etc.). Le texte est formate 
a 72 caracteres de large. Certains termes ont un sens particulier, par exemple must, 
should, can, must not. Leur usage est defini par la RFC 2219. Une RFC est obligatoi- 
rement en anglais et le fichier porte l'extension . txt. On a encore bien des regies. 

La RFC 2223 donne des details sur le format ; une ebauche en plan depuis 2004 
apres 8 revisions, la 2223bis, met a jour certains points. On trouve meme une RFC 
decrivant comment configurer MS Word pour produire un fichier RFC valide : la 
RFC 3285 ! 

Sachez par ailleurs qu'il existe trois sous- categories de RFC : les standards de premier 
plan (STD), les pratiques recommandees (BCP, Best Current Practice) et les notes 
informatives (FYI, For Your Information). Dernier point : les RFC publiees le l er avril 
sont systematiquement des canulars. Faites done une recherche, 9a vaut le detour. 
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Enfin, le format texte d'une RFC rend difficile la navigation a l'interieur du docu- 
ment, les references n'etant pas des hyperliens. Aussi, sachez qu'il existe un acces 
HTML aux documents, dont la navigation est par consequent facilitee. Pour obtenir 
la version HTML d'une RFC, c'est facile : prenez FURL officielle de la version prin- 
cipal, par exemple : http://www.ietf.org/rfc/rfc4287.txt. 
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1.2. Namespace and Version 

The XML Namespaces URI [W3C.REC-xml-names-19990114] for the XHL data 
format described in this specification is: 

http://ww. w3.org/2GG5/Atom 

For convenience, this data format may be referred to as "Atom 1.0". 
This specification uses "Atom" internally. 

1.3. Notational Conventions 

This specification describes conformance in terms of tvo artifacts: 
Atom Feed Documents and Atom Entry Documents. Additionally, it 
places some requirements on Atom Processors. 

This specification uses the namespace prefix "atom:" for the 
Namespace URI identified in Section 1.2, above. Note that the choice 
of namespace prefix is arbitrary and not semantically significant. 

Atom is specified using terms from the XML Infoset 
[W3C.REC-xml-infoset-2GG4G2G4] . However, this specification uses a 
shorthand for two common terms: the phrase "Information Item" is 
omitted when naming Element Information Items and Attribute 
Information Items. Therefore, when this specification uses the term 
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Remplacez le « www. » par « tool s . », le chemin /rf c/ par /html/ et retirez 1' exten- 
sion. Vous obtenez ceci : http://tools.ietf.org/html/rfc4287. 

Et voila une version HTML de votre RFC, avec des liens automatiques pour les 
numeros de pages, les URL, les references et les renvois entre sections. Par ailleurs, 
certaines portions sont mises en gras (titres) ou en italique, et les en-tetes et pieds de 
page sont grises. Jugez plutot (figure C-7). 
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RFC 4287 Atom Format December 2005 

1.2. Namespace and Version 

The XML Namespaces URI [ W3C.REC-xml-names-1999Q114 ] for the XML data 
format described in this specification is: 

http://ww.v3.orQ/2005/Atom 

For convenience, this data format may be referred to as "Atom 1.0". 
This specification uses "Atom" internally. 

1.3. Notational Conventions 

This specification describes conformance in terms of two artifacts: 
Atom Feed Documents and Atom Entry Documents. Additionally, it 
places some requirements on Atom Processors. 

This specification uses the namespace prefix "atom:" for the 
Namespace URI identified in Section 1.2 , above. Note that the choice 
of namespace prefix is arbitrary and not semantically significant. 

Atom is specified using terms from the XML Infoset 
[ W3C.REC-xml-infoset-20040204 ] . However, this specification uses a 
shorthand for two common terms: the phrase "Information Item" is 
omitted when naming Element Information Items and Attribute 
Information Items. Therefore, when this specification uses the term 
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Structure generate d'une RFC 

Une RFC commence toujours par son en-tete declaratif, repris en en-tete de chaque 
page. Void un exemple, raccourci en largeur pour tenir sur cette page : 



Network Working Croup 
Request for Comments: 4287 
Category: Standards Track 



M. Nottingham, Ed. 
R. Sayre, Ed. 
December 2005 



On a sur la gauche le nom du groupe de travail (1'IETF en compte un certain 
nombre), le statut (RFC) et le numero du document. Les RFC sont en effet le plus 
souvent referencees par leur numero. La categorie indique plus precisement le statut. 
Ici, le terme Standards Track confirme que le document a valeur de standard. 

Sur la droite, on trouve la liste des auteurs principaux (le « Ed . » signifie Editor), et la 
date de publication du document, avec le mois et l'annee. 



Annexes 



L'en-tete des pages suivantes reprendra toutes ces informations ainsi que le numero 
de page et le titre du document : 

Nottingham & Sayre Standards Track [Page 1] 

RFC 4287 Atom Format December 2005 

Une RFC comporte obligatoirement une introduction, dont les premiers paragra- 
phes doivent decrire avec concision le contexte et l'objectif du standard. L'lETF est 
ici generalement plus efficace que le W3C dans ses abstracts... 

L'introduction comprend obligatoirement, generalement sur la fin, une section du 
type Notational Conventions, qui detaille les notations specifiques au document, et 
precise systematiquement le sens formel de termes comme must, should, cannot, etc. 
en faisant une reference a leur definition exacte dans la RFC 2119. 

Une RFC se clot generalement par une liste de references normatives (autres stan- 
dards) ou informatives, une liste des contributeurs au standard (auteurs n'ayant pas 
un statut « principal »), et souvent des versions consolidees de grammaires formelles 
ou autres informations techniques fragmentees dans le corps du document. 

II nest pas rare de voir, dans les derniers chapitres d'une RFC, un IANA Considera- 
tions, si le standard entraine le depot de nouveaux types MIME ou requisitionne cer- 
tains numeros de ports reseau, ainsi qu'un Security Considerations, qui detaille toute 
faille de securite potentielle envisagee par les auteurs. 

Enfin, les RFC font une utilisation intensive de la syntaxe EBNF, evoquee plus haut. 
Prenez par exemple la RFC 2616 (http://tools.ietf.org/html/rfc2616), celle qui decrit 
HTTP/1.1. Les syntaxes des en-tetes de requete et de reponse sont decrites en 
EBNF. Void un extrait dans le listing suivant. 

Listing C-7 Syntaxe EBNF de l'en-tete de requete Accept en HTTP/1.1 

Accept = "Accept" ":" 

#( media-range [ accept-params ] ) 

media-range = ( "*/*" 

I ( type "/" "*" ) 

I ( type "/" subtype ) 

) *( ";" parameter ) 
accept-params = ";" "q" "=" qvalue *( accept-extension ) 
accept-extension = ";" token [ "=" ( token | quoted-string ) ] 

Comme souvent, l'ensemble de la syntaxe est expliquee clairement en debut de RFC, 
dans la section Notational Conventions, pour ne pas perdre les lecteurs. 
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Notez que la RFC citee en exemple plus haut, celle du format de flux Atom, innove 
en utilisant des schemas Relax NG pour decrire son balisage. 
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En tant que developpeur web, voici les principales specifications qui devraient vous 
interesser : 

HTML 4.01 (elements et attributs autorises) 

• Reference : http://www.w3.org/TR/html4/ 

• Version francaise : http://www.la-grange.net/w3c/html4.01/cover.html 

XHTML 1.0 (repose sur HTML 4.01) 

• Reference : http://www.w3.org/TR/xhtml1/ 

• Version francaise : http://www.la-grange.net/w3c/xhtml1/ 

CSS 2.1 

• Reference: http://www.w3.org/TR/CSS21/ 

• Version francaise (2.0 !) : http://www.yoyodesign.org/doc/w3c/css2/cover.html 
Attention, la version 2.1 a beaucoup modifie la version 2.0... 

JavaScript 1.5 

• DevMo : http://developer.mozilla.org/fr/docs/JavaScript 

• ECMA : http://www.ecma-international.org/publications/standards/Ecma-262.htm 
DOM niveau 2 

• Noyau : http://www.w3.org/TR/DOM-Level-2-Core/ 

• HTML : http://www.w3.org/TR/DOM-Level-2-HTML/ 

• Evenements : http://www.w3.org/TR/DOM-Level-2-Events/ 

• Style : http://www.w3.org/TR/DOM-Level-2-Style/ 



D 

Developper avec son 
navigateur web 



C'est a ses outils qu'on reconnait le bon artisan... II est effarant de constater combien, 
encore aujourd'hui, les developpeurs web persistent a sous-utiliser leurs navigateurs 
dans leurs developpements. Le navigateur est relegue au rang de visualiseur, ce qui 
est insense ! 

II ne s'agit pas seulement de savoir configurer le cache pour etre certain de toujours 
utiliser la derniere version d'une ressource qui change frequemment. Les principaux 
navigateurs savent explorer les meandres internes de la page, son DOM, ses CSS, 
son accessibilite... lis fournissent des pelletees d'outils informatifs, d'analyseurs, et 
meme des debogueurs JavaScript ! 

II ne tient qua vous d'ajouter une bonne dose de confort et d'efficacite, en somme, de 
productivite, a votre methodologie de developpement. Si j'etais vous, je lirais attenti- 
vement cette annexe avant tout le reste. 
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Le cache peut etre votre pire ennemi 

Le cache peut etre votre pire ennemi, surtout alors que vous suivez les exemples de ce 
livre. Le cache, c'est tres pratique : il nous evite de passer notre vie a recharger tout le 
temps des images, feuilles de styles, etc. Mais en developpement, cela peut poser 
probleme. On change frequemment la CSS, le JavaScript, les feuilles XSLT... 

Chaque navigateur a sa facon bien a lui de gerer ce cache, qu'il s'agisse du disque ou 
de la memoire. Certains seront plus reactifs aux changements de ressources aux- 
quelles on accede directement que pour celles obtenues par Ajax ; d'autres recharge- 
ront plus volontiers du JavaScript que des CSS, etc. 

Le rafralchissement strict 

La plupart des navigateurs fournissent un mecanisme clavier pour effectuer un rafral- 
chissement strict, c'est-a-dire un rechargement effectif de l'integralite des ressources 
utilisees par la page : 

• Mozilla, Camino, Firefox, MSIE : au lieu de presser simplement F5 ou de cliquer 
sur le bouton idoine, maintenez la touche Ctrl ou Cmd enfoncee pendant ce temps. 
Hors MSIE, vous pouvez aussi utiliser Maj avec le bouton de rechargement ou F5. 

• Safari : utilisez Cmd+Maj+R au lieu de Cmd+R, ou maintenez Cmd enfoncee en pres- 
sant le bouton de rafraichissement. 

• Opera : il n'y a pas de mecanisme de rafraichissement strict ! C'est ahurissant, 
mais c'est comme 9a. En theorie, Opera ignore le cache a chaque rafraichissement 
explicite avec F5 ou son bouton de rechargement. Dans la pratique, sur les exem- 
ples de ce livre, j'ai du configurer le cache. On peut done decider de faire de 
meme, pour qu'il verifie soigneusement les nouvelles versions des ressources (voir 
un peu plus bas) ou vider le cache completement (voir ci-dessous). 

• Konqueror : ignore le cache a chaque rechargement explicite avec F5 ou son bou- 
ton de rechargement. 

Vider le cache 

II est parfois necessaire de vider completement le cache, ou en tout cas les parties du 
cache associees a la page en cours. Vbici comment faire: 

• Firefox : allez dans les options (Outils>Options sous Windows, Edition> Preferences 
sous Linux, Firefox>Preferences sous Mac OS X) et choisissez la categorie Vie pri- 
vee puis l'onglet Cache. Cliquez sur le bouton Vider le cache. Depuis la 1.5, Firefox 
permet egalement de supprimer instantanement tout ou partie de votre etat 
« prive » en enfoncant Ctrl+Maj+Suppr ou en allant dans Outils>Effacer mes traces. 
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Attention, par defaut cela selectionne bien plus que le cache ! Vous pouvez le con- 
figurer depuis la categorie Vie privee des options, avec le bouton Parametres. 

• Mozilla : allez dans Edition>Preferences>Cache et choisissez Vider le cache. 

• MSIE : allez dans Outils>Options lntemet>General>Fichiers Internet temporaires. Le 
bouton Supprimer les fichiers... permet de vider le cache (pensez a cocher la case 
Supprimertout le contenu hors-ligne). Validez. 

• Safari : dans le menu Safari, choisissez Vider le cache..., ou pressez Cmd+Option+E. 

• Opera : allez dans Outils>Preferences>Avance>Historique et choisissez le bouton 
Vider maintenant. 

• Konqueror : allez dans Configuration>Configurer Konqueror. Dans la liste a gauche, 
faites defiler pour choisir la categorie Cache. Cliquez sur le bouton Vider le cache. 

Configurer le cache 

Pour eviter les difficultes avec le cache, il est important de le configurer correcte- 
ment. En developpement, le mieux est de lui demander de verifier a chaque requete 
(a l'aide d'une requete HTTP HEAD) si chaque ressource a change depuis sa derniere 
version. On peut parfois le desactiver completement, mais c'est moins utile. 

Void les modes operatoires : 

• Mozilla, Camino, Firefox : c'est une mauvaise idee, mais vous pouvez demander 
au navigateur d'allouer Ko au cache dans les options. Toutefois, il ne s'agit que 
du cache disque : un cache memoire existe tout de meme. II est desactivable via 
les options « expert » de about : conf i g. La aussi, c'est une mauvaise idee... 

• MSIE : allez dans Outils>Options lnternet>General>Fichiers Internet temporaires. Cli- 
quez sur Parametres... Choisissez 1' option A chaque visite de la page. Ainsi, MSIE 
verifiera a chaque fois et recuperera toute nouvelle version. 

• Safari : a n'utiliser qua vos risques et perils... Fermez totalement Safari, ouvrez un 
terminal (outil Terminal dans Applications>Utilitaires), et tapez deux lignes : d'abord 
rm -fr -/Library/Caches/Safari, puis touch -/Library/Caches/Safari. 
Quittez le terminal. 

• Opera : allez dans Outils>Preferences>Avance>Historique et configurez les listes 
deroulantes Verifier les documents et Verifier les images, en les definissant a Toujours. 
Vous pouvez aussi choisir de desactiver le cache en definissant Cache memoire et 
Cache disque a Off, mais ce n'est pas une tres bonne idee... 

• Konqueror : allez dans Configuration>Configurer Konqueror. Dans la liste a gauche, 
faites defiler pour choisir la categorie Cache. Si la case Utiliser le cache est cochee, assu- 
rez-vous que l'option Assurer la synchronisation du cache est selectionnee. Pour desacti- 
ver completement le cache, decochez simplement la case. Mais sur Konqueror, c'est 
vraiment une mauvaise idee : sa gestion du cache est bien adaptee au developpement. 
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Fircfox, favori du developpeur grace aux extensions 

De base, Firefox fournit une console JavaScript plutot correcte (Outils>Console JavaS- 
cript), mais pas exceptionnelle. Nous l'avons vue au chapitre 2. 

Firefox est neanmoins sans doute le meilleur navigateur pour developper des applica- 
tions web, tant l'univers de ses extensions est riche d'outils fabuleux ! Je n'en cite que 
deux qui me semblent incontournables : la Web Developer Toolbar de Chris Pede- 
rick et Firebug de Joe Hewitt. 

Nous avons deja vu Firebug en detail aux chapitres 2, 3 et 4. Petite extension legere, 
elle fournit neanmoins une console JavaScript efficace, un objet console utilisable 
dans vos scripts, un pisteur de requetes Ajax, un debogueur JavaScript largement suf- 
fisant, et un inspecteur multivue (code source, tres utile ; DOM, plus classique ; 
Layout, parfois irremplacable...). C'est un bijou. 

La Web Developer Toolbar de Chris Pederick est devenue une veritable legende. Au 
point que la tres officielle Internet Explorer Developer Toolbar est une copie evi- 
dente. II me faudrait un chapitre entier pour la decrire, je vous conseille plutot de 
consulter son site, de la telecharger, a moins que ce ne soit deja fait, et de vous laisser 
convaincre par vous-meme ! 

Ceci dit, vous trouverez enormement d' extensions et d'outils complementaires, qui 
correspondent peut-etre davantage a vos besoins. Je cite rapidement le debogueur 
JavaScript officiel : Venkman ; l'inspecteur DOM a activer a l'installation de Firefox ; 
mais aussi la XML Developer Toolbar, GreaseMonkey, Platypus, Aardvark... 

Les URL correspondantes : 

• Web Developer Toolbar : http://chrispederick.com/work/webdeveloper/ 

• Firebug : http://www.joehewitt.com/software/firebug/ 

• XML Developer Toolbar : https://addons.mozilla.org/firefox/2897/ 

• GreaseMonkey : http://greasemonkey.mozdev.org/ 

• Platypus : http://platypus.mozdev.org/ 

• Aardvark : http://karmatics.com/aardvark/ 

• Venkman : http://www.mozilla.org/projects/venkman/ 
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Les tresors du menu Debug cache dans Safari 

Safari dispose d'un menu Debug cache (par defaut), qui regorge d'options interes- 
santes pour le developpeur web. Pour l'activer, il suffit de realiser les manipulations 
suivantes : 

1 Fermez totalement Safari. 

2 Ouvrez un terminal (Applications>Utilitaires>Terminal). 

3 Tapez defaults write com. apple. Safari IncludeDebugMenu 1. 

4 Vous pouvez relancer Safari. 

Bon, il n'est pas localise en francais. Mais regardez done : 

Figure D-1 show DOM Tree 

Le menu Debug de Safari show Render Tree 

Show View Tree 



Show Snippet Editor 

Show Caches Window 

Show Page Load Test Window ffi\ 



Use Transparent Window 
Always Check for World Leaks 
•/ Use Back/ Forward Cache 
Use Threaded Image Decoding 
Use ATSU For All Text 



Turn Off RSS Support... 
• Log JavaScript Exceptions 



Show JavaScript Console OKJ 



Keyboard and Mouse Shortcuts 



Start Profiling With Sample 


OffiS 


Stop Profiling With Sample 


OffiT 


Use Shark for Profiling 






Import lE/NS/Mozilla Bookmarks 




Populate History 






Go to about:blank Soon 






Open Page With 




► 


User Agent 




► 


Supported Protocols 




► 


Security 




► 



II donne envie, non ? 
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MSIE et la Internet Explorer Developer Toolbar 

MSIE ne brille guere par ses possibilites natives. Pas de console JavaScript, une ges- 
tion des plus penibles pour les erreurs et avertissements JavaScript... Toutefois, on 
peut ameliorer la situation avec deux outils : le debogueur de script et la Internet 
Explorer Developer Toolbar. 

Le debogueur de script est telechargeable ici : 

http://www.microsoft. com/downloads/details. aspx?familyid=2f465be0-94fd-4569-b3c4- 
dffdf19ccd99 (oui, c'est une URL tres longue et impossible a taper facilement...) 

On trouve des instructions d'utilisation sur : 

http://msdn.microsoft.com/library/en-us/sdbug/Html/sdbug_1 .asp 

La Internet Explorer Developer Toolbar est tres fortement inspiree de la Web Deve- 
loper Toolbar de Chris Pederick (voir pour s'en convaincre http://www.thinklemon.com/ 
weblog/stuff/WebDevelopervsDeveloperToolbar.jpg). On la telecharge, comme d'habi- 
tude, via une URL ahurissante : 

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e- 
2d5e1db91038 

C'est assez complet et 9a ajoute des mini-explorateurs DOM, CSS, etc. C'est mieux 
que rien. 



Et Opera, qu'a-t-il pour nous ? 



Opera est extremement riche en fonctionnalites, notamment en ce qui concerne 
l'accessibilite. Mais cote developpement, il n'offre pas grand-chose. 

II faut reconnaitre que sa fenetre de messages est excellente : elle concentre les mes- 
sages simples, d'avertissement et d'erreur pour un grand nombre de domaines (CSS, 
XML, JavaScript, DOM, HTML, SVG, etc.), le tout filtrable facilement. Mais on 
manque de debogueur JavaScript, d'inspecteur DOM, etc. 

Opera n'est pas vraiment le navigateur du developpement. Mais il faut tout de meme 
tester vos sites avec ! 
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